منو سایت

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

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

 تاریخ انتشار :
/
  وبلاگ
آموزش Redux در Next JS و آموزش کامل Redux با 19 آموزش رایگان

در این مقاله نحوه راه اندازی 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 در دایرکتوری ریشه پروژه خود ایجاد کنید و مطابق شکل زیر پوشه ها و فایل ها را در آن ایجاد کنید. پس از ایجاد دایرکتوری اکشن ها و کاهش دهنده ها، یک نمونه اکشن و کاهنده برای آزمایش ایجاد کنید.

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

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 آموزش رایگان

جلسه اول

جلسه دوم

جلسه سوم

جلسه چهارم

جلسه پنجم

جلسه ششم

جلسه هفتم

جلسه هشتم

جلسه نهم

جلسه دهم

جلسه یازدهم

جلسه دوازدهم

جلسه سیزدهم

جلسه چهاردهم

جلسه پانزدهم

جلسه شانزدهم

جلسه هفدهم

جلسه هجدهم

جلسه نوزدهم

جلسه بیستم