کانفیگ Redux و Redux-Saga در Next.js

در این مقاله قصد دارم نصب و کانفیگ redux و redux-saga رو در فریم‌ورک ری‌اکت Next.js به شما آموزش بدم.نصبyarn add redux react-redux next-redux-wrapper redux-saga next-redux-sagaاگر نیاز به فعال سازی اکستنشن مرورگر redux dev tools را دارید دستور زیر را هم در خط فرمان اجرا کنید.yarn add -D redux-devtools-extensionکانفیگ Storeیک فایل برای مثال در root پروژه خود با نام store.js ایجاد کنید و خطوط زیر رو درون اون بنویسید.import { applyMiddleware, createStore } from 'redux'; import { composeWithDevTools } from 'redux-devtools-extension'; import createSagaMiddleware from 'redux-saga'; import rootReducer from './reducers'; // combineReducers({..., ...}) import rootSaga from './sagas'; // yield all([fork(...), ...]) const bindMiddleware = (middleware) => { if (process.env.NODE_ENV !== 'production') { return composeWithDevTools(applyMiddleware(...middleware)); } return applyMiddleware(...middleware); }; const configureStore = (initialState) => { const sagaMiddleware = createSagaMiddleware(); const store = createStore( rootReducer, initialState, bindMiddleware([sagaMiddleware]) ); store.sagaTask = sagaMiddleware.run(rootSaga); return store; }; export default configureStore;خب یه توضیح کوتاه راجب کانفیگ بالا بدم.خطوط 1 تا 3 واسه import کتابخانه‌های redux و redux-dev-tools و redux-saga هستندر خط 5 یک فایل با نام reducers رو import کردم که درون این فایل تمامی reducer های من با هم combine شدندر خط 6 یک فایل دیگه برای saga با نام sagas ایمپورت کردم که درون این فایل تمامی saga های پروژه با هم fork شدنمن bindMiddleware رو به صورت یک تابع تعریف کردم، شاید روش دیگه‌ای شما دوست داشته باشین تعریفش کنین، خلاصه ... در صورتی که شما در mode ای غیر از production، برای مثال در حالت development باشید، redux-dev-tools وارد عمل شده و redux شما را تحت شعاع خودش قرار میدهدر ادامه هم که saga middleware رو به middleware های store اضاف و در نهایت create store کردم.اون sagaTask هم که به آبجکت store متصل کردم بعدها بدردمون میخوره.نیم نگاهی به فایل reducers.jsimport { combineReducers } from 'redux'; import userReducer from '../scenes/User/store/User.reducer'; const rootReducer = combineReducers({ user: userReducer // add other reducers to the array }); export default rootReducer;و نیم نگاهی به فایل sagas.jsimport { all, fork } from 'redux-saga/effects'; import user from '../scenes/User/store/User.saga'; /** * @description Notice how we now only export the rootSaga, * single entry point to start all Sagas at once. * @example rootSaga(); */ export default function* rootSaga() { try { yield all([ fork(user) // add other watchers to the array ]); } catch (e) {} }کانفیگ Next.jsخب حالا به سراغ کانفیگ Next.js برای Redux می‌ریم، فایل _app.js در دایرکتوری pages رو باز کنید و به شکل زیر اون رو کانفیگ کنید. (اگر این فایل وجود نداره، ایجادش کنید)// /pages/_app.js import { Provider } from 'react-redux'; import withRedux from 'next-redux-wrapper'; import withReduxSaga from 'next-redux-saga'; import createStore from '../store'; class MyApp extends App { // For Server Side Rendering static async getInitialProps({ Component, ctx }) { let pageProps = {}; if (Component.getInitialProps) { pageProps = await Component.getInitialProps({ context: ctx }); } return { pageProps }; } render() { const { Component, pageProps, store } = this.props; return ( <Container> <Provider store={store}> <Component {...pageProps} /> </Provider> </Container> ); } } export default withRedux(createStore)(withReduxSaga(MyApp));در مقاله‌های بعدی سعی میکنم تعریف یک action و dispatch کردن اون رو در saga بهتون آموزش بدم و همینطور آموزش dispatch کردن action ها در حالت SSR برای Next.js