Redux

 

Redux 

مقدمة:

عندما تنمو تطبيقات JavaScript وتصبح أكثر تعقيداً، تبرز الحاجة إلى طريقة منهجية لإدارة حالة (State) التطبيق. هنا يأتي دور Redux، المكتبة الأكثر شهرة لإدارة الحالة بشكل يمكن التنبؤ به. هذا المقال يقدم نظرة شاملة على Redux: فلسفته، مبادئه الأساسية، وكيفية استخدامه في مشاريعك.

1. ما هو Redux؟ ولماذا نحتاجه؟

Redux هو حاوية حالة يمكن التنبؤ بها لتطبيقات JavaScript. يساعد على إدارة حالة التطبيق بشكل مركزي، مما يجعل تدفق البيانات أحادي الاتجاه وواضحاً.

• المشكلة التي يحلها: مع تعدد المكونات، يصبح تتبع وتحديث الحالة مشتتاً ومعقداً.

• الحل الذي يقدمه: تخزين جميع حالة التطبيق في مكان واحد (Store)، وتحديثها عبر إجراءات (Actions) قابلة للتتبع.

2. المبادئ الأساسية الثلاثة لـ Redux:

1. مصدر وحيد للحقيقة (Single Source of Truth): تخزن حالة التطبيق كاملة داخل كائن واحد يسمى "المخزن (Store)".

2. الحالة للقراءة فقط (State is Read-Only): الطريقة الوحيدة لتغيير الحالة هي عن طريق إطلاق "إجراء (Action)"، وهو كائن يصف ما حدث.

3. التغييرات تتم بواسطة دوال نقية (Changes are made with Pure Functions): لتحديد كيف تتغير الحالة بفعل الإجراء، تكتب "دوال اختزال (Reducers)" – دوال نقية تأخذ الحالة والإجراء وتُرجع حالة جديدة.

3. مصطلحات Redux الأساسية (المفردات):

• الإجراء (Action): كائن JavaScript يحتوي على حقل type (إلزامي) وبيانات حمولة payload (اختياري). يصف حدثاً ما حدث.

• دالة الاختزال (Reducer): دالة نقية (state, action) => newState. تحدد كيف يتغير المخزن استجابةً لإجراء.

• المخزن (Store): الكائن الذي يجمع الحالة ودوال الاختزال ويوفر طرقاً مثل getState() و dispatch(action).

• الإرسال (Dispatch): الطريقة الوحيدة لبدء تغيير الحالة، عن طريق إرسال إجراء إلى المخزن.

• الاشتراك (Subscribe): طريقة للاستماع إلى تغييرات في المخزن.

4. دورة حياة البيانات في Redux (Data Flow):

1. يقوم حدث في الواجهة (مثل نقر زر) بـ إرسال (dispatch) إجراء.

2. يستقبل المخزن (Store) هذا الإجراء.

3. يستدعي المخزن دالة الاختزال (Reducer) المرتبطة، ويمرر لها الحالة الحالية والإجراء.

4. تقوم دالة الاختزال بحساب الحالة الجديدة بناءً على الإجراء وتُرجعها.

5. يقوم المخزن بتحديث حالته بالحالة الجديدة.

6. يتم إعلام جميع المكونات المشتركة (Subscribed) بالتغيير، فتقوم بإعادة التصيير (Re-render) إذا لزم الأمر.

5. Redux Toolkit (RTK) – الطريقة الحديثة الموصى بها:

مكتبة Redux الأصلية تتطلب كتابة الكثير من الكود (Boilerplate). Redux Toolkit هو الحل الرسمي والمعاصر الذي يبسط عملية الكتابة بشكل كبير. فهو يتضمن:

• configureStore(): إعداد المخزن بسهولة.

• createSlice(): لتوليد الإجراءات ودوال الاختزال تلقائياً.

• createAsyncThunk(): للتعامل مع العمليات غير المتزامنة (مثل طلبات API).

6. متى تستخدم Redux؟ ومتى تتجنبه؟

• استخدم Redux عندما: يكون لديك كميات كبيرة من الحالة يحتاج إليها العديد من أجزاء التطبيق، أو عندما يصبح تتبع التغييرات في الحالة معقداً.

• تجنب Redux عندما: يكون تطبيقك بسيطاً، أو يمكنك إدارة الحالة باستخدام useState و useContext في React.

7. مثال عملي مصغر (باستخدام Redux Toolkit):

javascript

// 1. إنشاء "شريحة" (Slice)

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

const counterSlice = createSlice({

  name: 'counter',

  initialState: { value: 0 },

  reducers: {

    incremented: state => { state.value += 1; },

    decremented: state => { state.value -= 1; },

  },

});

export const { incremented, decremented } = counterSlice.actions;

export default counterSlice.reducer;

// 2. إعداد المخزن (Store)

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

import counterReducer from './counterSlice';

const store = configureStore({

  reducer: { counter: counterReducer },

});

// 3. استخدامه في React (مع React-Redux Hooks)

import { useSelector, useDispatch } from 'react-redux';

import { incremented } from './counterSlice';

function Component() {

  const count = useSelector(state => state.counter.value);

  const dispatch = useDispatch();

  return (

    <button onClick={() => dispatch(incremented())}>

      Count: {count}

    </button>

  );

}

الخاتمة:

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

المراجع:

• الموقع الرسمي لـ Redux Toolkit (الموصى به): https://redux-toolkit.js.org/

• مقدمة إلى Redux (بالعربية - قديمة ولكن للمفاهيم): https://www.tutomena.com/web-development/javascript/redux-library/