شرح Redux Toolkit في React من الصفر بالعربي

هذا الدرس هو شرح Redux Toolkit في React من الصفر بالعربي. إذا كنت تعاني من حالة عالمية كبيرة (Global State)، أو بيانات مشتركة بين صفحات كثيرة، فـ Redux Toolkit هو الحل المنظم والاحترافي.

لماذا Redux Toolkit لإدارة الحالة العالمية؟

• حل رسمي من فريق Redux يقلل التعقيد.
• كود أقل مقارنة بـ Redux القديم.
• هيكلة واضحة للحالة والأكشنز.

متى تحتاج Redux Toolkit؟

• تطبيق كبير وفيه بيانات مشتركة عبر صفحات عديدة.
• تحتاج تتبع واضح لتغييرات الحالة.
• أكثر من فريق يعمل على نفس التطبيق.

التثبيت والإعداد الأساسي

npm install @reduxjs/toolkit react-redux

1) إنشاء الـ Store

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

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

شرح مفصل خطوة بخطوة:

• استوردنا configureStore لأنه يبني الـ store بطريقة حديثة.
• ربطنا الـ reducer باسم counter داخل الكائن reducer.
• الـ store هو المكان المركزي الذي يحفظ حالة التطبيق.

2) إنشاء 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;
    },
  },
});

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

شرح مفصل خطوة بخطوة:

• createSlice يجمع الحالة والأكشنز في مكان واحد.
• حددنا الاسم counter لتسهيل التتبع.
• initialState هو الوضع الابتدائي.
• داخل reducers نكتب التغييرات مثل increment و decrement.
• Redux Toolkit يسمح بتعديل الحالة مباشرة لأنه يستخدم Immer داخليًا.

3) ربط الـ Store بالتطبيق

import { Provider } from "react-redux";
import { store } from "./store";

function App() {
  return (
    <Provider store={store}>
      <YourApp />
    </Provider>
  );
}

شرح مفصل خطوة بخطوة:

• Provider يجعل الـ store متاحًا لكل المكوّنات.
• أي مكوّن داخل Provider يمكنه قراءة الحالة أو إرسال أكشنز.

4) استخدام state و dispatch داخل المكوّن

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

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

  return (
    <div>
      <p>القيمة الحالية: {value}</p>
      <button onClick={() => dispatch(increment())}>زيادة</button>
      <button onClick={() => dispatch(decrement())}>نقصان</button>
    </div>
  );
}

شرح مفصل خطوة بخطوة:

• useSelector يقرأ القيمة من الـ store.
• useDispatch يرسل الأوامر (Actions) لتغيير الحالة.
• عند الضغط على زر “زيادة” نرسل increment().
• عند الضغط على زر “نقصان” نرسل decrement().

Redux Toolkit vs Context API

• Context مناسب للحالات البسيطة مثل الثيم أو المستخدم.
• Redux Toolkit أفضل للحالات الكبيرة والمعقدة.
• Redux Toolkit يوفر DevTools قوية لتتبع التغييرات.

أفضل الممارسات المختصرة

• قسّم الحالة إلى Slices صغيرة وواضحة.
• استخدم أسماء واضحة للـ actions.
• لا تضع بيانات محلية بسيطة في Redux (ابقها في useState).

الأسئلة الشائعة — FAQ

ما هو Redux Toolkit؟

طريقة حديثة وبسيطة لاستخدام Redux بأقل كود ممكن.

هل Redux Toolkit أفضل من Redux القديم؟

نعم لأنه يقلل الـ boilerplate ويوفر أدوات جاهزة.

متى أستخدم Redux Toolkit؟

عندما تكون الحالة مشتركة ومعقدة بين صفحات عديدة.

ما الفرق بين Context API و Redux Toolkit؟

Context للحالات البسيطة، وRedux Toolkit للحالات الكبيرة والمعقدة.

ما هو store في Redux؟

هو المكان المركزي الذي يُحفظ فيه كل state.