Redux: ما هو، نمط إدارة الحالة في React Native

Q: ما الفرق بين Redux و Context API في React؟

Redux هو حل متكامل مع Store و DevTools و Middleware وحالة غير قابلة للتغيير. Context API هي آلية مدمجة في React لنقل البيانات بدون props drilling. Context مناسب للمظاهر العامة والتوطين، بينما Redux للحالة المعقدة مع العمليات غير المتزامنة والتخزين المؤقت والتصحيح. في التطبيقات الكبيرة، يسبب Context عمليات إعادة عرض غير ضرورية، بينما Redux مع المحددات يحل هذه المشكلة.

Q: ما هو Immer في Redux Toolkit؟

Immer هي مكتبة للتعامل غير القابل للتغيير مع الحالة، مدمجة في Redux Toolkit. تسمح Immer بكتابة المخفضات كما لو كنت تغير الحالة مباشرة: state.value += 1. تحت الغطاء، تنشئ Immer كائناً وكيلاً (draft)، وتتتبع التغييرات وتعيد كائناً جديداً غير قابل للتغيير. هذا يقلل حجم كود المخفضات بنسبة 50% ويزيل التغييرات العرضية.

Q: كيف تختبر Redux؟

يتم اختبار منطق Redux بشكل منعزل: Reducer — دالة نقية، يكفي استدعاؤها مع Actions مختلفة والتحقق من النتيجة. Action Creator — التحقق من الكائن الذي تم إرجاعه. Thunk — محاكاة API، واستدعاء dispatch والتحقق من Actions التي تم إرسالها. مكون مع useSelector — استخدام Provider مع Store اختباري في العارض. Redux DevTools تساعد في كتابة الاختبارات من خلال إعادة تشغيل تسلسل Actions من جلسة حقيقية.

Q: متى يجب استخدام Redux بدلاً من useState؟

useState كافٍ للحالة المحلية لمكون واحد: نص حقل، فتح/إغلاق نافذة منبثقة. Redux مطلوب عندما تتم مشاركة الحالة عبر العديد من الشاشات، أو تتطلب مزامنة غير متزامنة (بيانات من الخادم)، أو يجب حفظها بين عمليات إعادة تشغيل التطبيق (persist) أو تتطلب تصحيحاً عبر الزمن. للتطبيقات الصغيرة، Redux مبالغ فيه — استخدم Context + useReducer بدلاً من ذلك.

Q: ما هو التطبيع في Redux؟

Normalizr هي مكتبة لتطبيع البيانات المتداخلة إلى بنية Store مسطحة. بدلاً من تخزين كائنات عميقة مثل user.posts[0].comments، ينشئ التطبيع قواميس: entities.users، entities.posts، entities.comments مع مراجع بالمعرف. هذا يبسط تحديث كيان واحد في جميع الأماكن ويسرع المحددات. يوصي Redux Toolkit بالبيانات الطبيعية للنماذج المعقدة.

المؤلف: IT Sectr نُشر: 2026-02-19 وقت القراءة: 8 دق

Redux هو حاوية إدارة حالة قابلة للتنبؤ لتطبيقات JavaScript، أنشأها دان أبراموف في عام 2015. يطبق Redux تدفق بيانات أحادي الاتجاه استناداً إلى بنية Flux: يتم تخزين الحالة في Store واحد، ويتم تغييرها فقط من خلال دوال Reducer النقية ويتم البدء بها عبر Action مع Dispatch. وفقاً لـ npm Trends، يحافظ Redux على أكثر من 7 ملايين تنزيل أسبوعياً، ويبقى المعيار لإدارة الحالة في React Native وتطبيقات الويب.

الخلاصة

Store — مصدر الحقيقة الوحيد، يخزن شجرة حالة التطبيق بالكامل
Action — كائن بحقل type يصف نية تغيير الحالة
Reducer — دالة نقية (prevState, action) => newState بدون آثار جانبية
Dispatch — طريقة Store لإرسال Action إلى Reducer
Middleware — طبقة بين dispatch و reducer للعمليات غير المتزامنة والتسجيل

ما هو Redux؟

Redux هو نمط معماري ومكتبة لإدارة الحالة، يستند إلى ثلاثة مبادئ: مصدر حقيقة واحد، حالة للقراءة فقط، وتغييرات من خلال دوال نقية. على عكس MVC، حيث يمكن للنموذج تغيير الحالة بشكل غير متوقع، يضمن Redux الحتمية: مع نفس بيانات الإدخال، تكون النتيجة هي نفسها دائماً.

استلهم Redux من بنية Flux الخاصة بفيسبوك ومن لغة Elm. الفرق الرئيسي عن Flux هو Store واحد بدلاً من عدة. في Redux، يتم تخزين كل حالة التطبيق — الكائنات، المصفوفات، أعلام التحميل — في شجرة واحدة. هذا يبسط التصحيح والاختبار وتصحيح الأخطاء عبر الزمن. يمكن للمطور حفظ Store بالكامل، وإعادة تشغيل تسلسل Actions ورؤية كيف تغيرت الحالة في كل خطوة.

وفقاً لاستطلاع State of JS 2025، يختار 68% من المستجيبين الذين يستخدمون إدارة الحالة Redux أو Redux Toolkit. الأداة مدعومة من جميع الأطر الحديثة: React و React Native و Angular و Vue وحتى JavaScript الخالص بدون أطر.

تدفق البيانات أحادي الاتجاه

تدفق البيانات أحادي الاتجاه هو المبدأ الأساسي لـ Redux، حيث تتحرك البيانات بدقة في اتجاه واحد: View → Action → Dispatch → Reducer → Store → View. لا يمكن لأي مكون تغيير Store مباشرة. الـ View تشترك فقط في التغييرات عبر useSelector أو connect وتبدأ التغييرات عبر dispatch.

دورة عمل Redux: ينقر المستخدم على زر → يستدعي المكون dispatch({ type: 'INCREMENT' }) → يمرر Store الـ Action إلى Root Reducer → يحسب Reducer حالة جديدة → يخطر Store المشتركين → يعاد عرض View بالبيانات الجديدة. تضمن هذه الدورة أن كل تغيير له سبب واضح في شكل Action محدد.

DevTools — أداة مدمجة في Redux لمراقبة كل Action وحالة Store ووقت التنفيذ. يرى المطور قائمة بجميع Actions المرسلة، وفرق الحالة (diff) قبل وبعد، ويمكنه العودة إلى أي حالة سابقة. هذا يجعل تصحيح الحالات المعقدة أسرع بعشرات المرات مقارنة بالتسجيل التقليدي.

المكونات الأساسية لـ Redux

Store — كائن يحتوي على شجرة الحالة الكاملة للتطبيق. يتم إنشاؤه عبر configureStore (RTK) أو createStore. يوفر Store ثلاث طرق: getState() للقراءة، dispatch(action) للتغيير، subscribe(listener) للاشتراك. في Redux Toolkit، يتضمن Store بالفعل middleware و DevTools ودعم الشرائح.

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action و Action Creator — Action هي كائن بحقل إلزامي type (ثابت نصي) و payload اختياري (بيانات). Action Creator هي دالة تعيد Action. في Redux Toolkit، يُستخدم createAction لتوليد Actions بكتابة تلقائية.

Reducer — دالة نقية تستقبل الحالة الحالية و Action، وتعيد حالة جديدة. يجب ألا يقوم Reducer بـ: تغيير الحالة (يتم إرجاع كائن جديد)، أو استدعاء APIs، أو توليد أرقام عشوائية، أو الوصول إلى Date. يتم ضمان عدم القابلية للتغيير عبر عامل الانتشار ... أو Imber (مدمج في RTK).

المكون	المسؤولية	القيود
Store	تخزين الحالة، dispatch، subscribe	واحد لكل تطبيق
Action	وصف نية تغيير الحالة	يجب أن يحتوي على type
Reducer	حساب حالة جديدة	دالة نقية، بدون آثار جانبية
Dispatch	إرسال Action إلى Reducer	متزامن افتراضياً
Selector	استخراج البيانات من Store	تخزين مؤقت عبر createSelector

Middleware و Redux Thunk

Middleware هي سلسلة من الدوال تُدرج بين استدعاء dispatch ولحظة وصول Action إلى Reducer. يتلقى كل middleware واجهة Store API ويمكنه تسجيل أو تعديل أو تأخير أو إلغاء Actions. Redux Thunk هو middleware القياسي للعمليات غير المتزامنة، مما يسمح بإرسال دوال بدلاً من الكائنات.

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

Middlewares الشائعة: Redux Thunk — للاستدعاءات غير المتزامنة البسيطة، Redux Saga — للسيناريوهات المعقدة مع الأجيال المولدة (debounce، سباق، طلبات متوازية)، Redux Observable — استناداً إلى RxJS للتدفقات التفاعلية. في Redux Toolkit، يتم توصيل middleware عبر معامل middleware في configureStore.

وفقاً لاستطلاع State of JS 2025، يُستخدم Thunk في 72% من مشاريع Redux، Saga في 18%، Observable في 5%. بالنسبة لمعظم التطبيقات، يكفي مزيج Thunk + RTK Query لتغطية 95% من سير العمل غير المتزامن للبيانات.

Redux Toolkit و RTK Query

Redux Toolkit (RTK) هي الطريقة الرسمية والموصى بها لكتابة منطق Redux، التي صدرت في عام 2019. يتضمن RTK configureStore و createSlice و createAsyncThunk و createEntityAdapter، مما يقلل من الكود التكراري لـ Redux بنسبة 60-70%. بدلاً من إنشاء Action Creators و Reducers وأنواع يدوياً، يُستخدم createSlice واحد.

TypeScript

import { createSlice, PayloadAction } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment(state) { state.value += 1 },
    incrementByAmount(state, action: PayloadAction<number>) {
      state.value += action.payload
    }
  }
})

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

RTK Query هو حل مدمج للعمل مع APIs استناداً إلى Redux Toolkit. يسمح بتعريف نقاط النهاية بشكل تصريحي عبر createApi مع توليد تلقائي للخطافات والتخزين المؤقت وإبطال العلامات والتحديثات المتفائلة. يستبدل RTK Query الكتابة اليدوية لـ Thunk و Reducer و Selector لكل طلب API.

Entity Adapter — أداة createEntityAdapter لتطبيع مجموعات الكيانات. توفر مختزلات CRUD مدمجة ومحددات وفرز لمصفوفات الكائنات. إذا كان Store يحتوي على قوائم مستخدمين أو منتجات أو طلبات — فإن Entity Adapter يقلل كود التخفيض بنسبة 80%.

Redux في React Native

React Native Redux هو التركيبة القياسية للتطبيقات المحمولة في JavaScript. يتكامل Redux عبر Provider من react-redux، الذي يغلف المكون الجذر للتطبيق. الخطافات useSelector و useDispatch تمنح المكونات الوصول إلى الحالة دون props drilling. Persist — redux-persist يحفظ Store في AsyncStorage أو MMKV، ويستعيد الحالة بعد إعادة تشغيل التطبيق.

Middleware لـ React Native: redux-flipper للتصحيح عبر Flipper، redux-observable للتدفقات التفاعلية مع برامج تشغيل أصلية، react-native-mmkv للتخزين المستدام السريع. إضافة التنقل redux-first-router تربط الشاشات بـ Store، مما يسمح باستعادة حالة الشاشة عند العودة.

في React Native، يُستخدم Redux مع استراتيجية network-first: يحاول التطبيق أولاً تحميل البيانات من الخادم، ثم يخزنها مؤقتاً في Store عبر RTK Query أو redux-persist. يتم تحقيق وضع عدم الاتصال من خلال الجمع بين Redux + NetInfo + قائمة انتظار Actions لإعادة الإرسال عند استعادة الاتصال.

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

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

Redux هو حل متكامل مع Store و DevTools و Middleware وحالة غير قابلة للتغيير. Context API هي آلية مدمجة في React لنقل البيانات بدون props drilling. Context مناسب للمظاهر العامة والتوطين، بينما Redux للحالة المعقدة مع العمليات غير المتزامنة والتخزين المؤقت والتصحيح. في التطبيقات الكبيرة، يسبب Context عمليات إعادة عرض غير ضرورية، بينما Redux مع المحددات يحل هذه المشكلة.

ما هو Immer في Redux Toolkit؟

Immer هي مكتبة للتعامل غير القابل للتغيير مع الحالة، مدمجة في Redux Toolkit. تسمح Immer بكتابة المخفضات كما لو كنت تغير الحالة مباشرة: state.value += 1. تحت الغطاء، تنشئ Immer كائناً وكيلاً (draft)، وتتتبع التغييرات وتعيد كائناً جديداً غير قابل للتغيير. هذا يقلل حجم كود المخفضات بنسبة 50% ويزيل التغييرات العرضية.

كيف تختبر Redux؟

يتم اختبار منطق Redux بشكل منعزل: Reducer — دالة نقية، يكفي استدعاؤها مع Actions مختلفة والتحقق من النتيجة. Action Creator — التحقق من الكائن الذي تم إرجاعه. Thunk — محاكاة API، واستدعاء dispatch والتحقق من Actions التي تم إرسالها. مكون مع useSelector — استخدام Provider مع Store اختباري في العارض. Redux DevTools تساعد في كتابة الاختبارات من خلال إعادة تشغيل تسلسل Actions من جلسة حقيقية.

متى يجب استخدام Redux بدلاً من useState؟

useState كافٍ للحالة المحلية لمكون واحد: نص حقل، فتح/إغلاق نافذة منبثقة. Redux مطلوب عندما تتم مشاركة الحالة عبر العديد من الشاشات، أو تتطلب مزامنة غير متزامنة (بيانات من الخادم)، أو يجب حفظها بين عمليات إعادة تشغيل التطبيق (persist) أو تتطلب تصحيحاً عبر الزمن. للتطبيقات الصغيرة، Redux مبالغ فيه — استخدم Context + useReducer بدلاً من ذلك.

ما هو التطبيع في Redux؟

Normalizr هي مكتبة لتطبيع البيانات المتداخلة إلى بنية Store مسطحة. بدلاً من تخزين كائنات عميقة مثل user.posts[0].comments، ينشئ التطبيع قواميس: entities.users، entities.posts، entities.comments مع مراجع بالمعرف. هذا يبسط تحديث كيان واحد في جميع الأماكن ويسرع المحددات. يوصي Redux Toolkit بالبيانات الطبيعية للنماذج المعقدة.

الملخص

Redux — حاوية حالة قابلة للتنبؤ مع Store واحد ومخفضات نقية
Action — كائن مع type، Reducer — دالة نقية، Dispatch — آلية الإرسال
Redux Toolkit — واجهة API الرسمية مع createSlice و createAsyncThunk و RTK Query
Middleware — طبقة للعمليات غير المتزامنة: Thunk، Saga، Observable
React Native يتكامل عبر Provider و useSelector و redux-persist لوضع عدم الاتصال
DevTools — تصحيح عبر الزمن مع إعادة تشغيل كل Action
Normalizr — تطبيع البيانات لمحددات وتحديثات فعالة

سنقوم بتطوير تطبيق جوال جاهز

تقدم IT Sectr تطبيقات iOS وAndroid للشركات الناشئة والشركات منذ عام 2017. سوف نقدم لك النصح ونقترح أفضل حل.

مناقشة المشروع

Provider: ما هو، إدارة الحالة في Flutter →

ViewModel — ما هو، Android Architecture Component و Jetpack →

Feature creep في التطوير — ما هو، أسبابه وكيفية مكافحته →

الكود القذر في التطوير — ما هو، علاماته وكيفية الترتيب →