لماذا Redux Toolkit؟

Redux Toolkit يبسط Redux كثيراً. يقلل الـ boilerplate ويتضمن أفضل الممارسات.

إعداد Store

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

إنشاء Slice

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

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    addBy: (state, action) => { state.value += action.payload; },
  },
});

export const { increment, decrement, addBy } = counterSlice.actions;
export default counterSlice.reducer;

استخدام في Component

import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';

function Counter() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      {count}
      
      
    
  );
}

الخلاصة

Redux Toolkit أفضل طريقة لاستخدام Redux. createSlice يوفر الكثير من الكود.