Redux مع React: تحكم كامل في الـ State بسهولة

إزاي تستخدم Redux مع React لتنظيم الـ State بسهولة ⚡​

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

هنا ييجي دور Redux، المنقذ اللي هيخليك تتحكم في كل حاجة بوضوح وتنظيم 🎯.

1. Redux بدأت ليه؟ 🤔​

زمان، المطورين كانوا بيتعاملوا مع الـ state كأنهم في حرب مع البيانات. كل شوية تسأل نفسك:

• "الـ state فين؟"
• "إيه اللي حصل دلوقتي؟"
• "ليه الدنيا اتشقلبت؟"

التطبيقات الكبيرة كل يوم تكبر، وده خلا Redux تظهر كحل لتنظيم كل بيانات التطبيق. مش بس مكتبة، دي أشبه بمخطط لإدارة كل شيء بشكل مرتب.

---

2. Redux بتشتغل إزاي؟ 🎬​

فكر فيها كأنها مسرحية، كل حاجة ماشية بنظام:

• Store: ده المكان اللي فيه كل بياناتك، المخزن الرسمي للـ state.
• Action: أي حاجة بتحصل في التطبيق، زي ضغط زرار، بيعلن عنها ويحدد نوع العملية.
• Reducer: بيقرر يغير الـ state بناءً على الـ action اللي حصل.

يعني ببساطة، كل لما يحصل action جديد، الـ reducer بياخد نسخة من الـ state القديم ويطلع لك النسخة الجديدة بعد التغيير.

---

3. نطبّق خطوة خطوة 💻​

أول حاجة: نزل Redux في مشروعك:

npm install redux react-redux

تاني حاجة: اعمل store لتخزين البيانات:

import { createStore } from 'redux';

const store = createStore(reducerFunction);

تالت حاجة: اعمل 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;
}
}

رابع حاجة: استخدم dispatch عشان تبعت الـ action للـ store:

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

---

4. ربط Redux مع React ⚛️​

علشان كل كومبوننت في التطبيق تشوف الـ store، لف التطبيق كله بـ Provider:

import { Provider } from 'react-redux';

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

بعد كده استخدم useSelector و useDispatch داخل الكومبوننتات:

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>
);
}

---

5. إمكانيات متقدمة: Middlewares و Redux Toolkit ⚡​

• Middlewares: لو عندك عمليات async زي API requests، استخدم 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 مع React. الموضوع ممكن يبان معقد في الأول، بس مع التطبيق العملي هتلاقي نفسك مسيطر على كل صغيرة وكبيرة في مشروعك 🚀.

افتكر دايمًا: الشطارة مش في الحفظ، الشطارة في الفهم والتطبيق 💡.
لو عندك سؤال أو استفسار، اكتب في الكومنتات 👇.