Redux Toolkit
آخر تحديث: 2026-11-03
Redux Toolkit Redux Toolkit
Redux Toolkit (RTK) هو الأسلوب الموصى به رسميًا لكتابة Redux: يُنشئ createSlice مخفّضًا وأفعاله في خطوة واحدة، ويهيّئ configureStore لك أدوات التطوير والوسيطات، ويسمح لك Immer المدمج بتحديث الحالة وكأنها قابلة للتعديل. والنتيجة قوالب أقل بكثير من الإعداد اليدوي الكلاسيكي، مع بقاء المصدر الوحيد للحقيقة كما هو.
| المجموعة | التوجيه وإدارة الحالة |
|---|---|
| النوع | مكتبة |
| منذ الإصدار | Redux Toolkit 2.x |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
import { configureStore, createSlice } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: { // Immer: you can "mutate" directly
inc: state => { state.value += 1 },
addAmount: (state, action) => { state.value += action.payload }
}
})
export const { inc, addAmount } = counterSlice.actions
export const store = configureStore({ reducer: counterSlice.reducer })⚙️ المعاملات
| action.payload | البيانات التي يحملها dispatch: في dispatch(addAmount(5)) تكون payload هي 5، وتُعلَن بتوقيع مخفّض createSlice. |
|---|
القيمة المرجعة：createSlice يُعيد { reducer, actions }؛ وconfigureStore يُعيد المتجر؛ وفي المكوّن useDispatch يعطي دالة dispatch وuseSelector تختار الحالة.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
الأزرار الثلاثة تُرسل inc وaddAmount(10) وreset فيتبع الرقم — نموذج Redux لحقيقة واحدة مع تحديثات dispatch صرفة (محاكاة بـ useReducer).💡 النقاط الأساسية
💡 نصيحة يستطيع مخفّض createSlice «تعديل» الحالة لأن Immer مدمج، لكن النتيجة تبقى تحديثًا غير قابل للتغيير؛ ولا تمسّ الحالة خارج المخفّض.
ℹ️ ملاحظة للبيانات غير المتزامنة استخدم createAsyncThunk أو RTK Query؛ ويدير الأخير أيضًا ذاكرة الطلبات ويستطيع استبدال useQuery كليًا.
⚠️ تحذير وضع حالة واجهة محلية (مسودة حقل، علامة فتح نافذة) في Redux نمط مضاد: الحالة المشتركة للأعمال فقط من تنتمي للمتجر، وتبقى الحالة المحلية مع useState.
🏷️ المزيد من التوجيه والحالة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س ما الفرق بين RTK وRedux الكلاسيكي؟
ج لا ثوابت أفعال مكتوبة يدويًا، وImmer والـ thunks مدمجة، وأدوات التطوير مهيّأة لك؛ يختفي أكثر من نصف القوالب وهو الأسلوب الموصى به وحيدًا لكتابة Redux.
س ألا يكسر state.value += 1 ثبات التغيير؟
ج ظاهريًا فقط: يعترض Immer الإسناد ويُنتج نسخة غير قابلة للتغيير، وهو ما يعادل { ...state, value: state.value + 1 } لكنه أوقع للقراءة.
س متى أختار RTK دون Zustand؟
ج اختر RTK حين يعرف الفريق بيئة Redux، أو يحتاج سفرًا الزمن في أدوات التطوير، أو يريد اتفاقية وسيطات موحّدة، أو يعمل في فريق كبير؛ واختر Zustand حين تريد أقل كود وأصغر أثر.
