آموزش Redux در Next JS و آموزش کامل Redux با 19 درس رایگان
در این مقاله به شما یاد می دهم که چه طور 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 (
<>
<Provider store={store}>
<Component {…pageProps} />
</Provider>
</>
);
}
export default wrapper.withRedux(MyApp);
حتما بخوانید: next.js چیست؟ معایب، مزایا و کاربردها
5- حالا می توانید از redux useDispatch و useSelector برای استفاده از redux در صفحات و اجزا اصلی استفاده کنید. (منبع کمکی)
آموزش کامل Redux با 19 درس رایگان
جلسه اول | جلسه دوم |
جلسه سوم | جلسه چهارم |
جلسه پنجم | جلسه ششم |
جلسه هفتم | جلسه هشتم |
جلسه نهم | جلسه دهم |
جلسه یازدهم | جلسه دوازدهم |
جلسه سیزدهم | جلسه چهاردم |
جلسه پانزدهم | جلسه شانزدهم |
جلسه هفدهم | جلسه هجدهم |
جلسه نوزدهم | جلسه بیستم |
با این اپلیکیشن ساده، هر زبانی رو فقط با 5 دقیقه در روز، توی 80 روز مثل بلبل حرف بزن! بهترین متد روز، تقویت حافظه، آموزش تصویری. یادگیری زبان کلید یادگیری هر مهارتی در قرن 21 !