🔄 ⭐ مميز

Redux

مكتبة إدارة الحالة الأصلية (Original State Management Library)

★ ★ ★ ★ ★ (5/5)

👁️ 4 مشاهدة

📅 02 Jul 2026

⚛️ React 🌐 عام

مستوى الخبرة المطلوب:

⚡ متوسط 🚀 محترف 🏢 مؤسسي

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف 🔄 State-Management

المشاهدات 4

تاريخ الإضافة 02/07/2026

آخر تحديث 02/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Redux هي مكتبة JavaScript لإدارة حالة التطبيق بشكل قابل للتنبؤ. طُوّرت بواسطة Dan Abramov (الآن في React team). تعتمد على مفاهيم: Single source of truth, State is read-only, Changes through pure functions (reducers). ⚠️ ملاحظة: Redux الحديث يُنصح باستخدام Redux Toolkit بدلاً منه مباشرة. هذا الملف ي...

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

Legacy applications (قديمة)

•

فهم كيف يعمل Redux تحت الغطاء

•

State management في React

•

Applications مع complex state logic

•

Time-travel debugging

✨ المميزات

أبرز مميزات هذه الأداة

✓

Predictable state mutations

✓

Time-travel debugging (Redux DevTools)

✓

Middleware ecosystem كبير

✓

Single source of truth

✓

Pure reducers

✓

Community ضخمة

✓

Extensive documentation

⚠️ العيوب

نقاط يجب مراعاتها

boilerplate ضخم (actions

action creators

reducers)

معقد للمبتدئين

أداء overhead مع state الكبير

مُحدّث الآن بـ Redux Toolkit

Requires الكثير من الـ setup

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Redux Toolkit

Zustand

MobX

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

// ACTION TYPES
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';

// ACTION CREATORS
const increment = () => ({ type: INCREMENT });
const decrement = () => ({ type: DECREMENT });

// REDUCER
const counterReducer = (state = 0, action) => {
  switch (action.type) {
    case INCREMENT:
      return state + 1;
    case DECREMENT:
      return state - 1;
    default:
      return state;
  }
};

// STORE
import { createStore } from 'redux';

const store = createStore(counterReducer);

// SUBSCRIBE
store.subscribe(() => {
  console.log('State:', store.getState());
});

// DISPATCH
store.dispatch(increment());
store.dispatch(increment());
// State: 2

// REACT INTEGRATION
import { Provider, connect } from 'react-redux';

// App.tsx
<Provider store={store}>
  <Counter />
</Provider>

// Counter.tsx
const Counter = connect(
  (state) => ({ count: state }),
  { increment, decrement }
)(({ count, increment, decrement }) => (
  <div>
    <p>العدد: {count}</p>
    <button onClick={increment}>زيادة</button>
    <button onClick={decrement}>تقليل</button>
  </div>
));