ما هو Redux React؟
Redux React هي مكتبة تساعد في إدارة حالة التطبيق وتسهل الاتصال بين مكونات React. يتم استخدام Redux مع React للتحكم في تدفق البيانات في التطبيق وجعلها سهلة الإدارة والتوزيع. تعتمد Redux على تصميم نمط "Flux"، والذي يتميز بإدارة حالة التطبيق من خلال مخزن (store) وإجراءات (actions)، حيث يتم استخدام الإجراءات للتحكم في حالة التطبيق وتحديث العرض على الشاشة بناءً على حالة التطبيق الجديدة.
متى يجب استخدام Redux React؟
إذا كان التطبيق الخاص بك يتضمن حالة معقدة ومتغيرة باستمرار، أو إذا كان عليك القيام بعمليات متعددة ومختلفة لتحديث الحالة، فيجب استخدام Redux React. بالإضافة إلى ذلك، يوفر Redux ميزات مثل النسخ الاحتياطي وتسجيل الحركة (logging) والتحكم في تدفق البيانات، مما يجعل من السهل تعقب الأخطاء وتحليل الأداء.
كيف يعمل Redux React؟
عند استخدام Redux مع React، يتم تقسيم التطبيق إلى مكونات (components)، وكل مكون يحتوي على حالة خاصة به. يتم تحديد الحالة من خلال الخصائص (props) في المكون، ويمكن تحديث الحالة من خلال إجراءات (actions). يتم تخزين الحالة الكاملة للتطبيق في مخزن Redux (store)، ويتم استخدام الإجراءات للتحكم في تحديث الحالة في الم
كيفية استخدام Redux React:
تثبيت مكتبة Redux و React-Redux
قبل بدء استخدام Redux مع React، يجب تثبيت المكتبة والمكتبة المساعدة "React-Redux". يمكنك تثبيتهم عن طريق الأمر الآتي في موجه الأوامر:
Copy code
npm install redux react-redux
إنشاء مخزن Redux (store)
يتم إنشاء مخزن Redux باستخدام دالة createStore()، وتحتوي الدالة على مرجع للوظيفة المحددة لإدارة حالة التطبيق (reducer). يمكن القيام بذلك في ملف الـ "index.js" الخاص بالمشروع، ويتم تمرير المرجع المحدد للوظيفة المحددة في مكون Provider الخاص بـ React-Redux، ويتم استخدام Provider لجعل مخزن Redux متاحًا لجميع مكونات التطبيق.
javascript
Copy code
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
إنشاء وظيفة الإعداد الخاصة بالتخزين (reducer)
يتم استخدام الوظيفة الخاصة بالتخزين (reducer) لتحديد كيفية تحديث حالة التطبيق عندما تتم الإجراءات. يتلقى الوظيفة الخاصة بالتخزين حالة التطبيق الحالية وإجراء (action)، وتقوم بإرجاع حالة التطبيق الجديدة. يتم تحديد الوظيفة الخاصة بالتخزين في ملف خاص بالتخزين بما في ذلك:
arduino
Copy code
const initialState = {
count: 0,
};
function rootReducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return {
count: state.count + 1,
};
case 'DECREMENT':
return {
count: state.count - 1,
};
default:
return state;
}
}
export default rootReducer;
إنشاء الإجراءات (actions)
تقوم الإجراءات بالإشارة إلى التحديثات التي يجب إجراؤها على حالة التطبيق، ويتم استخدامها في مكونات التطبيق ل
تحديث الحالة. يتم تحديد الإجراءات في ملف خاص بالإجراءات بما في ذلك:
javascript
Copy code
export const increment = () => ({
type: 'INCREMENT',
});
export const decrement = () => ({
type: 'DECREMENT',
});
الوصول إلى حالة التطبيق من المكونات (components)
يتم الوصول إلى حالة التطبيق (state) من المكونات باستخدام الدالة الخاصة بـ React-Redux "useSelector". يتم تمرير دالة محددة إلى useSelector والتي تقوم بإرجاع الجزء المحدد من الحالة التطبيق التي يجب استخدامها في المكون.
javascript
Copy code
import React from 'react';
import { useSelector } from 'react-redux';
import { increment, decrement } from './actions';
function Counter() {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}
export default Counter;
إرسال الإجراءات إلى مخزن Redux من المكونات (components)
يتم إرسال الإجراءات إلى مخزن Redux باستخدام الدالة الخاصة بـ React-Redux "useDispatch". يتم استخدام useDispatch للوصول إلى الدالة الخاصة بالإرسال والتي يتم تمرير الإجراءات (actions) عن طريقها إلى مخزن Redux.
javascript
Copy code
import React from 'react';
import { useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
function Counter() {
const dispatch = useDispatch();
return (
<div>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
}
export default Counter;
هذا كل شيء عن Redux React. هناك الكثير من الإمكانيات مع Redux، ولكن هذه المفاهيم الأساسية يجب أن تمهد الطريق للبدء في استخدامها في تطبيقات React.
تكوين مخزن Redux (store)
يتم تكوين مخزن Redux باستخدام الدالة الخاصة بـ Redux "createStore". يتم تمرير المتحكم (reducer) كمعامل واحد، ويمكن تمرير وسيط (middleware) أوضح حالة إضافية للمعالجة.
javascript
Copy code
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;
توصيل المكونات (components) بمخزن Redux
يتم توصيل المكونات بمخزن Redux باستخدام الدالة الخاصة بـ React-Redux "Provider". يتم تمرير المخزن كمعامل واحد ويتم لف المكونات بـ Provider.
javascript
Copy code
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
استخدام وسائط (middlewares)
يمكن استخدام الوسائط (middlewares) لمعالجة الإجراءات (actions) قبل وصولها إلى المتحكم (reducer) أو بعده. يمكن استخدام وسائط مختلفة مثل Redux Thunk أو Redux Saga أو Redux Observable.
javascript
Copy code
import { createSlice } from '@reduxjs/toolkit';
import { apiCallBegan } from './api';
const slice = createSlice({
name: 'todos',
initialState: {
list: [],
loading: false,
lastFetch: null,
},
reducers: {
todosRequested: (todos, action) => {
todos.loading = true;
},
todosReceived: (todos, action) => {
todos.list = action.payload;
todos.loading = false;
todos.lastFetch = Date.now();
},
todosRequestFailed: (todos, action) => {
todos.loading = false;
},
},
});
export const { todosRequested, todosReceived, todosRequestFailed } = slice.actions;
export const loadTodos = () => (dispatch, getState) => {
const { lastFetch } = getState().entities.todos;
const diffInMinutes = (Date.now() - lastFetch) / (1000 * 60);
if (diffInMinutes < 10) return;
return dispatch(
apiCallBegan({
url: '/todos',
onStart: todosRequested.type,
onSuccess: todosReceived.type,
onError: todosRequestFailed.type,
})
);
};
export default slice.reducer;
استخدام React Redux Toolkit
يمكن استخدام React Redux Toolkit كأداة تسهل عملية الإعداد وتوفير تحسينات في الأداء والأمان. يوفر الأداة مجموعة من الدوال والأ
استخدام React Redux Toolkit
يمكن استخدام React Redux Toolkit كأداة تسهل عملية الإعداد وتوفير تحسينات في الأداء والأمان. يوفر الأداة مجموعة من الدوال والأوامر المعينة التي تعمل على تبسيط وتسريع عملية إعداد مخزن Redux وتحسين أداء التطبيق. تتضمن هذه الدوال مثل createSlice و createAsyncThunk و createEntityAdapter.
javascript
Copy code
import { createSlice } from '@reduxjs/toolkit';
import { apiCallBegan } from './api';
const todosSlice = createSlice({
name: 'todos',
initialState: {
list: [],
loading: false,
lastFetch: null,
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(loadTodos.pending, (state) => {
state.loading = true;
})
.addCase(loadTodos.fulfilled, (state, action) => {
state.list = action.payload;
state.loading = false;
state.lastFetch = Date.now();
})
.addCase(loadTodos.rejected, (state) => {
state.loading = false;
});
},
});
export const { todosRequested, todosReceived, todosRequestFailed } = todosSlice.actions;
export const loadTodos = createAsyncThunk('todos/loadTodos', async () => {
const response = await apiCallBegan({ url: '/todos' });
return response.data;
});
export default todosSlice.reducer;
الخلاصة:
تعتبر Redux و React من الأدوات القوية التي يمكن استخدامها لتطوير تطبيقات الويب ذات الحجم الكبير. تساعد هذه الأدوات في تنظيم الحالة (state) والإدارة بطريقة مرنة وسهلة الصيانة. بمجرد فهم المفاهيم الأساسية لكلا الأداتين ، يمكن للمطورين بناء تطبيقات عالية الجودة بشكل أسرع وأسهل.