توثيق Redux الشامل

// تحديث عنصر في مصفوفة
function updateArrayItem(array, itemId, updateFunction) {
return array.map(item => {
if (item.id !== itemId) {
// هذا ليس العنصر الذي نريد تحديثه - إعادته كما هو
return item;
}

// هذا هو العنصر الذي نريد تحديثه - إنشاء نسخة جديدة
return updateFunction(item);
});
}

// استخدام الدالة في المخفض
case 'UPDATE_TODO':
return updateArrayItem(
state,
action.payload.id,
todo => ({ ...todo, text: action.payload.text })
);

// حذف عنصر من مصفوفة
function removeItem(array, itemId) {
return array.filter(item => item.id !== itemId);
}

// استخدام الدالة في المخفض
case 'REMOVE_TODO':
return removeItem(state, action.payload);

// تحديث كائن متداخل
case 'UPDATE_USER_INFO':
return {
...state,
user: {
...state.user,
info: {
...state.user.info,
[action.payload.field]: action.payload.value
}
}
};

// تبسيط التحديثات باستخدام Immer
import { createSlice } from '@reduxjs/toolkit';

const todosSlice = createSlice({
name: 'todos',
initialState: [],
reducers: {
// يمكن تعديل state مباشرة لأن Immer يتعامل مع عدم التغيير
addTodo: (state, action) => {
state.push(action.payload);
},
toggleTodo: (state, action) => {
const todo = state.find(todo => todo.id === action.payload);
if (todo) {
todo.completed = !todo.completed;
}
},
removeTodo: (state, action) => {
const index = state.findIndex(todo => todo.id === action.payload);
if (index !== -1) {
state.splice(index, 1);
}
}
}
});

import { configureStore } from '@reduxjs/toolkit';
import usersReducer from '../features/users/usersSlice';
import postsReducer from '../features/posts/postsSlice';

export const store = configureStore({
reducer: {
users: usersReducer,
posts: postsReducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware()
.concat(logger),
devTools: process.env.NODE_ENV !== 'production',
});

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

// إنشاء entity adapter للمهام
const todosAdapter = createEntityAdapter({
// تحديد كيفية استخراج المعرف من كائن المهمة
selectId: (todo) => todo.id,
// ترتيب اختياري للكائنات
sortComparer: (a, b) => a.createdAt - b.createdAt,
});

// إنشاء الحالة الأولية
const initialState = todosAdapter.getInitialState({
status: 'idle',
error: null
});

const todosSlice = createSlice({
name: 'todos',
initialState,
reducers: {
todoAdded: todosAdapter.addOne,
todosReceived: todosAdapter.setAll,
todoUpdated: todosAdapter.updateOne,
todoRemoved: todosAdapter.removeOne,
}
});

// دوال للوصول إلى الحالة
export const {
selectAll: selectAllTodos,
selectById: selectTodoById,
selectIds: selectTodoIds
} = todosAdapter.getSelectors((state) => state.todos);

import { createSelector } from '@reduxjs/toolkit';

// دوال اختيار أساسية
const selectUsers = state => state.users.entities;
const selectActiveFilter = state => state.filters.activeOnly;

// دالة اختيار مركبة
export const selectActiveUsers = createSelector(
[selectUsers, selectActiveFilter],
(users, activeOnly) => {
return activeOnly
? users.filter(user => user.isActive)
: users;
}
);

import { createReducer, createAction } from '@reduxjs/toolkit';

// إنشاء الإجراءات
export const increment = createAction('counter/increment');
export const decrement = createAction('counter/decrement');

// إنشاء المخفض
const counterReducer = createReducer(0, (builder) => {
builder
.addCase(increment, (state, action) => {
return state + (action.payload || 1);
})
.addCase(decrement, (state, action) => {
return state - (action.payload || 1);
});
});