Redux هي حاوية حالة يمكن التنبؤ بها مبنية على ثلاثة مبادئ أساسية: مخزن واحد، حالة للقراءة فقط يتم تغييرها فقط عبر actions، وpure reducers التي تحسب الحالة التالية. تتدفق البيانات في اتجاه واحد، مما يجعل التغييرات قابلة للتتبع.
1. Single source of truth — the whole app's state lives in ONE store object
2. State is read-only — you never mutate it; you DISPATCH actions to change it
3. Changes via pure reducers — (state, action) => newState, no side effects
// STORE — holds the single state tree
const store = configureStore({ reducer: rootReducer });
// ACTION — a plain object describing what happened
const action = { type: "counter/incremented", payload: 1 };
// REDUCER — pure function: given state + action, returns NEW state
function counterReducer(state = { value: 0 }, action) {
switch (action.type) {
case "counter/incremented":
return { ...state, value: state.value + action.payload }; // new object
default:
return state;
}
}
// DISPATCH — the only way to trigger a change
store.dispatch(action);
// SELECT — read state
store.getState().counter.value;
UI dispatches an ACTION → REDUCER computes new STATE → STORE updates →
subscribed components re-render → user interacts → dispatches the next action
هذا التدفق الصارم في اتجاه واحد يعني أن كل تغيير في الحالة هو نتيجة action تم dispatching عليها ومعالجتها بواسطة دالة نقية — قابلة للتتبع بالكامل.
import { useSelector, useDispatch } from "react-redux";
function Counter() {
const count = useSelector(state => state.counter.value); // read
const dispatch = useDispatch();
return <button onClick={() => dispatch(increment())}>{count}</button>; // write
}
Predictability — every change is an explicit, logged action
Debuggability — time-travel debugging, action replay (Redux DevTools)
Testability — pure reducers are trivial to unit test
(ملاحظة: Redux الحديث يستخدم Redux Toolkit، الذي يقلل من boilerplate بشكل كبير مع الحفاظ على هذه المفاهيم.)
مفاهيم Redux الأساسية — المخزن الواحد، والactions، و pure reducers، والتدفق أحادي الاتجاه — تجعل حالة التطبيق يمكن التنبؤ بها وقابلة للتتبع، وهي القيمة الرئيسية للتطبيقات الكبيرة.
information store/action/reducer/dispatch/select ضروري للعديد من قواعد الأكواد التي تستخدم Redux، والمبادئ (التحديثات غير القابلة للتغيير، pure reducers، التدفق ثنائي الاتجاه) تتكرر في جميع مكتبات الحالة تقريباً.
المقابل هو boilerplate، الذي يتعامل معه Redux Toolkit مع الحفاظ على هذه الأساسيات.