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

هذا الدرس هو شرح Redux مع React Hooks من الصفر بالعربي. الهدف هنا أن تربط Redux بالتطبيق بدون تعقيد، باستخدام useSelector و useDispatch.

لماذا نستخدم React Redux Hooks؟

• أبسط من الطريقة القديمة connect.
• أكواد أقل وقراءة أوضح.
• متوافقة مباشرة مع Redux Toolkit.

تجهيز الـ Store (مراجعة سريعة)

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

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

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

• configureStore ينشئ store حديث ومختصر.
• ربطنا reducer باسم counter لكي نقرأه عبر state.counter.

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

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

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

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

• Provider يجعل store متاحة لكل المكوّنات.
• بدون Provider، React Hooks الخاصة بـ Redux لن تعمل.

قراءة البيانات بـ useSelector

import { useSelector } from "react-redux";

function CounterValue() {
  const value = useSelector((state) => state.counter.value);
  return <p>القيمة الحالية: {value}</p>;
}

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

• useSelector يقرأ البيانات من الـ store.
• نحدد مكان القيمة: state.counter.value.
• عند أي تغيير في هذه القيمة، المكوّن يعيد الرندر تلقائيًا.

تعديل البيانات بـ useDispatch

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

function CounterButtons() {
  const dispatch = useDispatch();

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

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

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

دمج القراءة والتعديل في مكوّن واحد

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.
• أرسلنا الأوامر بـ useDispatch.
• المكوّن أصبح متكامل: يقرأ ويعدّل من نفس المكان.

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

• اقرأ فقط ما تحتاجه داخل useSelector لتقليل إعادة الرندر.
• قسّم المكوّنات: مكوّن للقراءة وآخر للتعديل إن لزم.
• استخدم Redux Toolkit لتقليل التعقيد.

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

ما هي React Redux Hooks؟

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

ما الفرق بين connect و useSelector؟

connect هي الطريقة القديمة، أما useSelector فهي أبسط.

متى أستخدم useDispatch؟

عندما تحتاج إرسال أكشن لتغيير الحالة.

هل Redux Hooks تعمل مع Redux Toolkit؟

نعم وهي الطريقة الموصى بها.

كيف أتجنب إعادة الرندر الزائد في useSelector؟

اختر البيانات المطلوبة فقط أو استخدم memoization.