در این مقاله نحوه راه اندازی redux در پروژه NextJS را به شما آموزش می دهم. در پایان مقاله آموزش کاهش صفر تا صد در قالب 19 درس تصویری رایگان گردآوری شده است.
چیزهای اساسی
- Redux
- React-redux
- Redux-thunk
- redux-devtools-extension
- بعدی redux-wrapper
دانلود را فراموش نکنید: آموزش از صفر تا صد ری اکت بومی (ویدئو + PDF)
1- پس از اجرای برنامه NextJS با استفاده از npx create-next-app@latest ماژول های مورد نیاز برای اجرا، redux را در برنامه خود نصب کنید.
npm i next-redux-wrapper redux react-redux redux-thunk redux-devtools-extension
2- پوشه ای به نام store در دایرکتوری ریشه پروژه خود ایجاد کنید و مطابق شکل زیر پوشه ها و فایل ها را در آن ایجاد کنید. پس از ایجاد دایرکتوری اکشن ها و کاهش دهنده ها، یک نمونه اکشن و کاهنده برای آزمایش ایجاد کنید.
3- حالا فایل store.js را در دایرکتوری Store باز کرده و کد زیر را داخل آن قرار دهید.
وارد کردن {createStore, applicationMiddleware } از “redux”;
واردات thunk از “redux-thunk”;
وارد کردن { composeWithDevTools } از “redux-devtools-extension”;
وارد کردن {createWrapper } از “next-redux-wrapper”;
وارد کردن rootReducer از “./reducers”؛
// در اینجا حالت های اولیه وجود دارد
const initialState = {};
// میان افزار
const middleware = [thunk];
// ایجاد فروشگاه
صادرات const store = createStore(
ریشه کاهنده،
حالت اولیه،
composeWithDevTools(applyMiddleware(…middleware))
)
// ذخیره را به پوسته بعدی اختصاص دهید
const makeStore = () => store;
export const wrapper = createWrapper(makeStore);
کاملا رایگان: از صفر تا صد آموزش در هر زبان برنامه نویسی
4- فایل _app.js را مستقیماً در دایرکتوری pages مطابق شکل زیر تغییر دهید.
وارد کردن “../styles/globals.css”؛
import { wrapper, store } from “../store/store”;
وارد کردن { Provider } از “react-redux”;
تابع MyApp({Component, pageProps}) {
برگشت (
<>
<Компонент {…pageProps} />
)
}
صادرات wrapper.withRedux پیش فرض (MyApp)؛
حتما بخوانید: next.js چیست؟ معایب، مزایا و کاربردها
5- اکنون می توانید از redux useDispatch و useSelector برای استفاده از redux در صفحات و اجزای اصلی استفاده کنید. (منبع کمک)
آموزش کامل Redux با 19 آموزش رایگان
| جلسه اول | جلسه دوم |
| جلسه سوم | جلسه چهارم |
| جلسه پنجم | جلسه ششم |
| جلسه هفتم | جلسه هشتم |
| جلسه نهم | جلسه دهم |
| جلسه یازدهم | جلسه دوازدهم |
| جلسه سیزدهم | جلسه چهاردهم |
| جلسه پانزدهم | جلسه شانزدهم |
| جلسه هفدهم | جلسه هجدهم |
| جلسه نوزدهم | جلسه بیستم |