استخدام Redux مع React

الدرس التاسع والعشرون: استخدام Redux مع React

في هذا الدرس، سنتعرف على Redux وكيفية استخدامه لإدارة الحالة في تطبيقات React الكبيرة والمعقدة. سنغطي كيفية استخدام actions, reducers, و store في Redux، وكيفية ربط Redux مع React باستخدام react-redux.

1. ما هو Redux؟

Redux هو مكتبة لإدارة الحالة في تطبيقات JavaScript (عادةً مع React). يتيح لك Redux تخزين الحالة (state) في store مركزي واحد، مما يسهل إدارتها وتغييرها من أي مكان في التطبيق. يعتمد Redux على actions و reducers لتحديث الحالة، مما يجعله مناسبًا للتطبيقات الكبيرة التي تحتاج إلى إدارة حالة معقدة أو متعددة.

مفاهيم أساسية في Redux:

• Store: هو الكائن الذي يحتوي على حالة التطبيق بأكملها.
• Action: هو حدث أو عملية تطلب تغييرًا في الحالة. يحتوي الـ action عادةً على نوع الحدث (type) وبعض البيانات المرتبطة به.
• Reducer: هو دالة تأخذ الحالة الحالية (current state) والـ action (الذي يحتوي على نوع العملية والبيانات) وتعيد الحالة الجديدة بناءً على الـ action.
• Dispatch: هي الدالة المستخدمة لإرسال الـ action إلى الـ store.

2. إعداد Redux مع React

لتبدأ باستخدام Redux مع React، تحتاج إلى عدة خطوات أساسية:

1. تثبيت الحزم المطلوبة: أولاً، تحتاج إلى تثبيت redux و react-redux في مشروعك: npm install redux react-redux
2. إنشاء الـ Store: يمكننا إنشاء الـ store باستخدام دالة createStore من مكتبة Redux. سيحتوي الـ store على الحالة الأساسية للتطبيق.

مثال على إنشاء Store:

// store.js
import { createStore } from 'redux';

// تحديد الحالة الأولية للتطبيق
const initialState = {
  counter: 0
};

// تعريف الـ reducer
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, counter: state.counter + 1 };
    case 'DECREMENT':
      return { ...state, counter: state.counter - 1 };
    default:
      return state;
  }
};

// إنشاء الـ store
const store = createStore(counterReducer);

export default store;

في هذا المثال:

• قمنا بتعريف initialState الذي يحتوي على حالة مبدئية للتطبيق (مثل العدّاد).
• قمنا بإنشاء reducer يُحدّد كيفية تغيير الحالة بناءً على الـ action.
• استخدمنا createStore لإنشاء الـ store من خلال الـ reducer.

3. إنشاء Actions

Actions هي الكائنات التي تُرسل إلى store لطلب تغييرات في الحالة. عادةً، تحتوي الـ action على type لتحديد نوع العملية، وأحيانًا تحتوي على payload (بيانات إضافية).

مثال على Actions:

// actions.js
export const increment = () => ({
  type: 'INCREMENT'
});

export const decrement = () => ({
  type: 'DECREMENT'
});

في هذا المثال:

• أنشأنا دالتين increment و decrement اللتين تعيدان الـ action الذي يحتوي على type معين.

4. ربط Redux مع React باستخدام react-redux

نستخدم مكتبة react-redux لربط Redux بـ React. توفر react-redux أدوات مثل Provider و connect لتمرير الـ store إلى مكونات React وإجراء الاتصال بين الـ Redux و React.

استخدام Provider لتمرير الـ Store إلى تطبيق React:

في App.js، نستخدم Provider من react-redux لتمرير الـ store إلى التطبيق بأكمله:

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import Counter from './Counter';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>Counter Application</h1>
        <Counter />
      </div>
    </Provider>
  );
};

export default App;

• هنا استخدمنا Provider لتمرير الـ store الذي أنشأناه إلى التطبيق، مما يجعل الـ store متاحًا لجميع المكونات داخل التطبيق.

5. استخدام connect للتفاعل مع الـ Store في المكونات

بعد ربط Redux بـ React باستخدام Provider، نحتاج إلى استخدام connect (أو useSelector و useDispatch مع React-Redux hooks) للوصول إلى الحالة أو إرسال الـ actions من داخل المكونات.

مثال على استخدام connect:

// Counter.js
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './actions';

const Counter = ({ counter, increment, decrement }) => {
  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

// توصيل المكون بـ Redux store
const mapStateToProps = (state) => ({
  counter: state.counter
});

const mapDispatchToProps = {
  increment,
  decrement
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

في هذا المثال:

• استخدمنا connect لتوصيل مكون Counter بـ Redux.
• mapStateToProps تُستخدم للوصول إلى state من الـ store.
• mapDispatchToProps تُستخدم لتمرير الدوال increment و decrement كـ props للمكون.

6. استخدام React-Redux Hooks (useSelector و useDispatch)

بدلاً من استخدام connect، توفر react-redux الآن Hooks مثل useSelector و useDispatch للتفاعل مع الـ store بشكل أبسط.

مثال على استخدام React-Redux Hooks:

// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

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

  return (
    <div>
      <p>Counter: {counter}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

في هذا المثال:

• استخدمنا useSelector للحصول على قيمة الـ counter من الـ store.
• استخدمنا useDispatch لإرسال الـ actions (مثل increment() و decrement()).

7. الملخص

في هذا الدرس، تعلمنا كيفية استخدام Redux لإدارة الحالة في تطبيقات React. قمنا بتغطية:

• إنشاء الـ store وتحديد الـ reducer.
• تعريف actions لتنفيذ العمليات على الحالة.
• ربط Redux مع React باستخدام react-redux.
• استخدام connect و React-Redux hooks مثل useSelector و useDispatch للتفاعل مع الـ store.

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