آموزش Redux در Next JS و آموزش کامل Redux با 19 درس رایگان

رتبه: 5 ار 1 رای SSSSS
ریداکس در نکست جی اس
نویسنده: تیم تولید محتوا زمان مطالعه 2 دقیقه

در این مقاله به شما یاد می دهم که چه طور redux را در یک پروژه NextJS راه اندازی کنید. انتهای مطلب هم آموزش صفر تا صد redux به صورت 19 درس رایگان ویدیویی تدوین شده است.

ملزومات

  • Redux
  • React-redux
  • Redux-thunk
  • Redux-devtools-extension
  • Next-redux-wrapper

حتما دانلود کنید: آموزش صفر تا صد react native (فیلم +PDF)

1-بعد از راه‌ اندازی برنامه NextJS با استفاده از npx create-next-app@latest ماژول ‌های ضروری برای راه‌ اندازی، redux را در برنامه تان نصب کنید.

npm i next-redux-wrapper redux react-redux redux-thunk redux-devtools-extension

2- پوشه ای به نام store در روت دایرکتوری پروژه تان ایجاد کنید و در داخل آن پوشه ها و فایل هایی را مطابق شکل زیر بسازید. بعد از ساخت دایرکتوری اکشن ها و کاهنده ها (Reducers)، یک اکشن و کاهنده نمونه برای تست ایجاد کنید.

3- حالا فایل store.js را در دایرکتوری Store باز کنید و کد زیر را داخل آن قرار بدهید.

import { createStore, applyMiddleware } from “redux”;

import thunk from “redux-thunk”;

import { composeWithDevTools } from “redux-devtools-extension”;

import { createWrapper } from “next-redux-wrapper”;

import rootReducer from “./reducers”;

// initial states here

const initalState = {};

// middleware

const middleware = [thunk];

// creating store

export const store = createStore(

rootReducer,

initalState,

composeWithDevTools(applyMiddleware(…middleware))

);

// assigning store to next wrapper

const makeStore = () => store;

export const wrapper = createWrapper(makeStore);

 

کاملا رایگان: آموزش صفر تا صد هر زبان برنامه نویسی

4- فایل _app.js را مستقیما در دایرکتوری pages مطابق شکل زیر تغییر بدهید.

import “../styles/globals.css”;

import { wrapper, store } from “../store/store”;

import { Provider } from “react-redux”;

function MyApp({ Component, pageProps }) {

return (

<>

</>

);

}

export default wrapper.withRedux(MyApp);

حتما بخوانید: next.js چیست؟ معایب، مزایا و کاربردها

5- حالا می توانید از redux useDispatch و useSelector برای استفاده از redux در صفحات و اجزا اصلی استفاده کنید. (منبع کمکی)

آموزش کامل Redux با 19 درس رایگان

جلسه اول
جلسه دوم
جلسه سوم
جلسه چهارم
جلسه پنجم
جلسه ششم
جلسه هفتم
جلسه هشتم
جلسه نهم
جلسه دهم
جلسه یازدهم
جلسه دوازدهم
جلسه سیزدهم
جلسه چهاردم
جلسه پانزدهم
جلسه شانزدهم
جلسه هفدهم
جلسه هجدهم
جلسه نوزدهم
جلسه بیستم

 

profile name
تیم تولید محتوا

بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

مطالب پیشنهادی برای شما

محصولات مرتبط

مشاهده همه
آموزش برنامه نویسی سی پلاس پلاس
آموزش برنامه نویسی سی پلاس پلاس
قیمت محصول 80٪ 70,000 تومان 350,000
ادامه مطلب

کلاس های آنلاین مرتبط

مشاهده همه
سایر مقالات آموزشی
سایر مقالات آموزشی

مدرس : حامد رضوانی

0

*برای مشاهده قیمت کلاس روی رزرو کلاس آنلاین کلیک کنید*

رزرو کلاس آنلاین

دیدگاهتان را بنویسید

1 2 3 4 5

1 نظر درباره «آموزش Redux در Next JS و آموزش کامل Redux با 19 درس رایگان»

  • fazeli.masoud401
    fazeli.masoud401 آیا این دیدگاه مفید بود ؟

    مهندس از درس ده به بعد رو نداره چرا؟

    پاسخ
مشاهده همه نظرات
سبد خرید
سبد خرید شما خالی است
× جهت نصب روی دکمه زیر در گوشی کلیک نمائید
آی او اس
سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید