ما هو Redux Toolkit؟

Redux هي أداة شائعة لإدارة الحالة في بيئة React. ومع ذلك، غالبًا ما يُشتكى من استخدام Redux التقليدي بأنه مُعقد ويصعب استخدامه نظرًا لاحتياجه إلى خطوات متعددة لإنشاء المتجر وإنشاء العديد من الملفات ذات التعليمات البرمجية المتكررة وعدم وجود معيار واضح لكتابة المنطق. وُلد Redux Toolkit لحل هذه المشاكل. تم تطويره من قبل فريق ReduxJS نفسه، ويساعد Redux Toolkit في كتابة تعليمات Redux البرمجية بسرعة واكتمال ووفقًا لمعيار موحد.

لا يُبسط Redux Toolkit عملية إنشاء المتجر فحسب، بل يتضمن أيضًا بعضًا من middlewares و Redux Devtool لتصحيح الأخطاء ومتابعة عملية تحديث الحالة. وهذا يُوفر الوقت والجهد للمطورين.

يُعد إعلان نوع الإجراء في Redux التقليدي طويلًا نوعًا ما، ولا تُستخدم هذه القيمة إلا عند إنشاء الإجراء وفي المُخفض. يوفر Redux Toolkit الدالة createAction لإنشاء إجراء بطريقة أكثر اختصارًا. تأخذ هذه الدالة سلسلة نصية وتُعيد دالة تهيئة إجراء بنوع هو قيمة السلسلة النصية التي تم تمريرها.

import { createAction } from '@reduxjs/toolkit';
const increment = createAction('INCREMENT');
console.log(increment()); // {type: "INCREMENT"}

علاوة على ذلك، تسمح createAction باسترجاع نوع الإجراء بسهولة، مما يُوفر المزيد من التعليمات البرمجية:

console.log(increment.toString()); // "INCREMENT"
console.log(increment.type); // "INCREMENT"

يوفر Redux Toolkit أيضًا الدالة createReducer لإنشاء مُخفض بطريقة أبسط وأكثر وضوحًا من طريقة الكتابة التقليدية. تسمح createReducer بتهيئة المُخفض بمنطق واضح مثل كائن مرجعي، حيث يكون كل مفتاح نوعًا وقيمة دالة مُخفض.

import { createReducer } from '@reduxjs/toolkit'
const increment = createAction('INCREMENT')
const decrement = createAction('DECREMENT')

const initialState = {
  count: 0
}

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state) => ({ count: state.count - 1 })
})

تأخذ createReducer معلمتين: القيمة الأولية للحالة وكائن يساعد المُخفض على الاستماع وتحديث الحالة. استنادًا إلى خاصية computed property في ES6، يُمكننا إعادة كتابة التعليمات البرمجية أعلاه بشكل أكثر اختصارًا:

const counterReducer = createReducer(initialState, {
  [increment]: (state) => ({ count: state.count + 1 }),
  [decrement]: (state ) => ({ count: state.count - 1 })
})

بفضل createAction و createReducer، أصبحت عملية إنشاء المتجر في Redux Toolkit أبسط وأسهل بكثير من Redux التقليدي. يتم تنظيم التعليمات البرمجية بشكل واضح وسهل القراءة والصيانة. يُساعد Redux Toolkit في تبسيط إدارة الحالة في تطبيق React، مما يُساعد المطورين على التركيز على منطق الأعمال بدلاً من التعليمات البرمجية المتكررة.

// store.js
import { configureStore, createAction, createReducer } from '@reduxjs/toolkit';

// actions
const increment = createAction('increment')
const decrement = createAction('decrement')

const initialState = {
  count: 0
}

const rootReducer = createReducer(initialState, {
  [increment]: (state) => ({count: state.count + 1}),
  [decrement]: (state) =>  ({count: state.count - 1})
})


const store = configureStore({
  reducer: rootReducer
})

export default store