سيطر على بيانات تطبيقك بدون تعقيد مع Redux

[x32x01]

تخيل معايا إنت شغال على مشروع React. لكن كل ما تيجي تدير ال state بتاعة التطبيق تلاقي نفسك متلخبط... الأرقام في كل حتة وبتحاول تفتكر إيه اللي حصل في أي لحظة. هنا بقى بيدخل اللي هينظم الدنيا: Redux.

الحكاية بدأت إزاي؟
زمان، المطورين كانوا بيتعاملوا مع الـ state زي ما يكونوا في حرب مع البيانات. كل شوية تلاقيك بتسأل نفسك: "الـ state فين؟"، "إيه اللي حصل دلوقتي؟"، "ليه الدنيا اتشقلبت؟". وبما إن التطبيقات الكبيرة كل يوم تكبر أكتر ظهرت الـ Redux عشان تكون الـمنقذ. هي مش بس مكتبة، دي أشبه بمخطط لتنظيم كل بيانات تطبيقك.

طيب، Redux بتشتغل إزاي؟​

لو فكرت في الـ Redux كأنها مسرحية هتلاقي كل حاجة ماشية بنظام وورق سيناريو محدد لكل دور:
- الـ Store: ده المكان اللي فيه كل الـ data بتاعتك، المخزن اللي بتخزن فيه كل الـ state بتاع التطبيق.
- الـ Action: ده لما حاجة بتحصل في التطبيق، زي لما تضغط على زرار في الصفحة، بيقولك "أيوة، حصلت حاجة جديدة"، وبيكون معاه نوع العملية اللي حصلت.
- الـ Reducer: اللي بيقرر يغير الـ state بناء على الـ action اللي حصل.
يعني ببساطة كل لما يحصل action جديد الـ reducer بياخد نسخة من الـ state القديم ويشوف هيتغير إزاي بناء على العملية اللي حصلت وبيرجع لك الـ state الجديد.
حاسس إنك بدأت تتوه؟ لا تقلق!

خلينا نبدأ خطوة خطوة نطبّق الكلام ده عشان تشوف الموضوع بعينك:

1- أول حاجة، عشان تجيب الـ Redux، لازم تنزلها:​

npm install redux react-redux

2- وبعدين، هنعمل store عشان نحفظ فيه البيانات. الـ store ده أشبه بكونترول روم، كل حاجة بتحصل فيه:​

import { createStore } from 'redux';
const store = createStore(reducerFunction);

3- بعد كده، هنعمل حاجة اسمها reducer، وده زي ما قولنا، اللي بيتحكم في البيانات وبيقرر هتتغير إزاي بناء على الأحداث:​

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

خلاص كده؟ لسة، انت كده حطيت الأساسيات، لكن لازم بقى تقول للـ store "اهو حصلت حاجة، اعمل حسابك!". هنا بيجي دور dispatch، اللي بيبعت action للـ store عشان يحصل التغيير:

store.dispatch({ type: 'INCREMENT' });

طيب، كله تمام لحد هنا، لكن فين الـ React في الموضوع؟

عشان نربط الـ Redux بتطبيق React، هنستخدم مكتبة React-Redux اللي بتعملنا ده:

1- أول حاجة نلف التطبيق كله بـ Provider عشان كل الكومبوننتس تقدر تشوف الـ store:​

import { Provider } from 'react-redux';
function App() {
  return (
    <Provider store={store}>
      <YourAppComponents />
    </Provider>
  );
}

2- بعد كده نستخدم useSelector و useDispatch عشان نجيب بيانات من الـ store أو نغيرها:​

import { useSelector, useDispatch } from 'react-redux';
function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>
        +1
      </button>
    </div>
  );
}

أكيد مش هسيبك كده. عارف إيه اللي بيخلي الـ Redux أكتر احترافية؟​

حاجة اسمها middlewares، اللي بتساعدك لما تكون عاوز تشغل حاجات async (زي الـ API requests) مع الـ dispatch. وهنا بتيجي مكتبة redux-thunk اللي هتسهل عليك التعامل مع أي منطق غير متزامن في تطبيقك.

وكمان، لو عاوز الحل الجاهز، استخدم الـ Redux Toolkit اللي بتخليك تكتب كود أقل وفي نفس الوقت منظم أكتر، زي كده:

import { createSlice, configureStore } from '@reduxjs/toolkit';
const counterSlice = createSlice({
  name: 'counter',
  initialState: { count: 0 },
  reducers: {
    increment: state => { state.count += 1 },
    decrement: state => { state.count -= 1 }
  }
});
export const { increment, decrement } = counterSlice.actions;
const store = configureStore({ reducer: counterSlice.reducer });

الخلاصه:
انت دلوقتي معاك كل الأدوات اللي تخليك متمكن وقوي في استخدام الـ Redux. الموضوع في الأول ممكن يبان معقد، لكن كل اللي محتاجه هو إنك تطبقه مرة واثنين. وأوعى تنسى، زي ما بدأت مع الـ Redux عشان تحل مشكلة، لازم تستمر لحد ما تحس إنك متحكم تماما في كل صغيرة وكبيرة في تطبيقك.
خليك فاكر دايما: الشطارة مش في إنك تحفظ، الشطارة في إنك تفهم وتطبق
وبكده نكون خلصنا شرحنا عن الـ Redux. لو عندك سؤال أو استفسار، اكتب في الكومنتات.