المهاجرة من redux الى reduxtoolkit

Rayden Storm · 27 مارس 2021

السلام عليكم

أريد استخدام redux tollkit في مشاريعي المستقبلية واريد خطوات مشروحة للتحويل من الشيفرة التقليدية الى شيفرة reduxtoolki وهذا مثال عن الشيفرة التقليدية

index.js

 import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    // REDUX

    import { Provider } from 'react-redux';

    import store from './redux/store';

    ReactDOM.render(

      <Provider store={store}>

        <React.StrictMode>

          <App />

        </React.StrictMode>

      </Provider>,

    document.getElementById('root'),

    );

store.js

 import { createStore } from 'redux';

    import rootReducer from './rootReducer';


    const store = createStore(rootReducer);


    export default store;

rootReducer.js

import { combineReducers } from 'redux';


    import counterReducer from './Counter/counter.reducer';


    const rootReducer = combineReducers({

        counter: counterReducer,

    });

    export default rootReducer;

counter.action.js

 import { INCREMENT, DECREMENT } from './counter.types';


    export const increaseCounter = () => {

        return {

            type: INCREMENT,

        };

    };

    export const decreaseCounter = () => {

        return {

           type: DECREMENT,

        };

    };

Abdullah Muhammad · 27 مارس 2021

هناك عدة طرق لذلك منها التالي
بالنسبه لل action و ال reducer يمكنك التحويل للاتي

import createAction from '@reduxjs/toolkit'

const increaseCounter = createAction('INCREMENT');
const decreaseCounter = createAction('DECREMENT');

بعد ذلك يمكنك نداء الفانكشن عند الحاجه لتنفيذ الاكشن
والاكشن هنا عند النداء عليه يأخذ argument واحد ويكون عباره عن ال payload

increaseCounter();
decreaseCounter(payload);

import { createReducer } from '@reduxjs/toolkit';

const counterReducer = createReducer( [], { 
 INCREMENT: (state, action) => {وهنا اللوجيك المسئول  عن عملية ال Increment},
 DECREMENT: (state, action) => {وهنا اللوجيك المسئول عن عملية ال decrement}
});

ويمكنك دمج الخطوتين السابقتين في ملف واحد وهناك طريقة أخرى ايضا يمكنك من خلالها الدمج بين ال reducer وال actions
وذلك باستخدام createSlice كالاتي :

import { createSlice } from '@reduxjs/toolkit';

const counterStoreSlice = createSlice({
  name: 'storeName',
  initialState: [],
  reducers: {
    increaseCounter: (state, action) => {وهنا اللوجيك الخاص بعملية ال Increment},
    increaseCounter: (state, action) => {وهنا اللوجيك الخاص بعملية ال Decrement}
  }
});

وللحصول على الاكشن
const { increaseCounter } = counterStoreSlice.actions;

ولاستخدام الاكشن

increaseCounter();

وللحصول ال reducer

const counterReducer = counterStoreSlice.reducer;

بعد ذلك نحتاج الى أن نعطي هذا ال reducer الى ال store عن طريق الكود التالي

import { configureStore } from '@treactjs/toolkit';

const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

وبعد ذلك يمكنك إستخدام ال store الذي تم إنشاءه كالتالي :

import React from 'react';

    import ReactDOM from 'react-dom';

    import './index.css';

    import App from './App';

    // REDUX

    import { Provider } from 'react-redux';

    import store from 'المسار الذي قمت فيه بإنشاء الستور باستخدام ال redux toolkit ';

    ReactDOM.render(

      <Provider store={store}>

        <React.StrictMode>

          <App />

        </React.StrictMode>

      </Provider>,

    document.getElementById('root'),

    );

المهاجرة من redux الى reduxtoolkit

السؤال

Rayden Storm

1 جواب على هذا السؤال

Recommended Posts

Abdullah Muhammad

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية