تُعرف Redux على نطاق واسع بأنها مكتبة قوية لإدارة الحالة مصممة خصيصًا لتطبيقات JavaScript، وغالبًا ما تُستخدم جنبًا إلى جنب مع إطار العمل الشهير React. من خلال تقديم حاوية حالة يمكن الاعتماد عليها، ينشئ Redux أساسًا متينًا يبسط إلى حد كبير مهمة التعامل مع حالات التطبيق واستكشاف الأخطاء وإصلاحها. يتعمق هذا الدليل في المكونات الأساسية التي يتألف منها Redux، ويقدم شرحًا تفصيليًا لكل عنصر ويوضح كيفية تفاعلها بشكل تآزري لتبسيط الوظيفة العامة للتطبيق. يهدف هذا الاستكشاف المتعمق إلى توضيح الأعمال الداخلية لـ Redux، وتمكين المطورين من فهم تعقيدات أداة إدارة الحالة هذه وتسخير قدراتها بشكل فعال في مشاريعهم.

جدول المحتويات

1. مقدمة إلى Redux
2. إعداد Redux في تطبيق React
3. الإجراءات وأنواع الإجراءات
4. المخفضات والشرائح
5. تهيئة المتجر
6. توصيل مكونات التفاعل
7. الخاتمة والمراجع

1. مقدمة إلى الإعادة

يتبع Redux نموذج تدفق البيانات أحادي الاتجاه ويستند إلى ثلاثة مبادئ أساسية:

• مصدر واحد للحقيقة: يتم تخزين حالة التطبيق بالكامل في شجرة كائنات داخل متجر واحد. تعمل هذه المركزية على تسهيل تصحيح الأخطاء وتتبع التغييرات عبر تطبيقك.
• الحالة للقراءة فقط: الطريقة الوحيدة لتغيير الحالة هي إصدار إجراء، كائن يصف ما حدث. وهذا يضمن أن طفرات الحالة يمكن التنبؤ بها ويمكن تتبعها.
• يتم إجراء التغييرات باستخدام وظائف خالصة: لتحديد كيفية تحويل شجرة الحالة من خلال الإجراءات، تكتب مخفضات خالصة. الوظائف النقية يمكن التنبؤ بها وقابلة للاختبار، مما يبسط عملية تصحيح الأخطاء واختبار الوحدة.

2. إعداد Redux في تطبيق React

أولاً، قم بتثبيت Redux وReact-Redux:

npm install redux react-redux @reduxjs/toolkit

يقوم هذا الأمر بتثبيت مكتبة Redux الأساسية، وروابط React لـ Redux، ومجموعة أدوات Redux، مما يبسط العديد من المهام الشائعة مثل إعداد المتجر وإنشاء الشرائح.

3. الإجراءات وأنواع الإجراءات

الإجراءات عبارة عن حمولات من المعلومات التي ترسل البيانات من تطبيقك إلى متجر Redux الخاص بك. أنواع الإجراءات هي ثوابت تمثل الإجراء.

actionTypes.js

export const INCREMENT = "INCREMENT";
export const DECREMENT = "DECREMENT";
export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE";
export const RESET = "RESET";

export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });
export const incrementByValue = (value) => ({
  type: INCREMENT_BY_VALUE,
  payload: value,
});
export const reset = () => ({ type: RESET });

يساعد تحديد الإجراءات وأنواع الإجراءات بشكل واضح في الحفاظ على الاتساق ويقلل الأخطاء في تطبيقك.

4. المخفضات والشرائح

تحدد المخفضات كيفية تغير حالة التطبيق استجابةً للإجراءات المرسلة إلى المتجر. الشرائح عبارة عن مجموعة من منطق وإجراءات مخفض Redux لميزة واحدة في تطبيقك، والتي تم إنشاؤها باستخدام طريقة createSlice الخاصة بـ Redux Toolkit.

counterSlice.js

import { createSlice } from "@reduxjs/toolkit";

const initialState = { number: 0 };

const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.number  = 5;
    },
    decrement: (state) => {
      state.number = Math.max(0, state.number - 5);
    },
    incrementByValue: (state, action) => {
      state.number  = action.payload;
    },
    reset: (state) => {
      state.number = 0;
    },
  },
});

export const { increment, decrement, incrementByValue, reset } = counterSlice.actions;

export default counterSlice.reducer;

لدمج شرائح متعددة:

rootReducer.js

import { combineReducers } from "@reduxjs/toolkit";
import counterReducer from "../slices/counterSlice";

const rootReducer = combineReducers({
  counter: counterReducer,
});

export default rootReducer;

5. تكوين المتجر

المتجر هو الكائن الذي يجمع الإجراءات والمخفضات معًا. إنه يحتفظ بحالة التطبيق، ويسمح بالوصول إليها عبر getState()، ويقوم بتحديثها عبر الإرسال(الإجراء)، ويسجل المستمعين عبر الاشتراك(المستمع).

store.js

import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "../reducers/rootReducer";

const store = configureStore({
  reducer: rootReducer,
});

export default store;

6. توصيل مكونات التفاعل

لربط مكونات React بمتجر Redux، استخدم مكون الموفر من رد فعل ردوكس لتمرير المتجر إلى مكوناتك، واستخدم خطافات useSelector وuseDispatch للوصول إلى الحالة ومعالجتها.

App.js

import React from "react";
import { Provider } from "react-redux";
import store from "./redux/store/store";
import Counter from "./components/Counter";
import MusCo from "./MusCo redux logo.png";

function App() {
  return (
    

        

          Practice Redux with MusCo
        
        

          

            by 
            Mustafa 
            Coskuncelebi
          
        
      
    
  );
}

export default App;

CounterComponent.js

import { useDispatch, useSelector } from "react-redux";
import {
  decrement,
  increment,
  incrementByValue,
  reset,
} from "../slices/counterSlice";
import { useState, useEffect } from "react";

function Counter() {
  const [value, setValue] = useState("");
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

  useEffect(() => {
    const showcase = document.querySelector("#showcase");
    if (number 
      
Counter
      
{number}
      

         dispatch(increment())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
          Increment by 5
        
         dispatch(decrement())} className="w-40 h-10 p-2 mt-5 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={number 
          Decrement by 5
        
      
      

        

           {
                   let newValue = e.target.value.trim();
                   if (newValue === "") {
                     newValue = "";
                     reset();
                   }
                   if (/^\d*$/.test(newValue)) {
                     setValue(newValue);
                   }
                 }} 
                 value={value} 
                 placeholder="Enter Value" />
           {
            dispatch(incrementByValue(Number(value)));
            setValue("");
          }} className="w-40 h-10 p-2 rounded-md outline-1 outline-violet-500 outline text-violet-900" style={{ backgroundColor: "#c2ff72" }}>
            Add this Value
          
        
      
       {
        dispatch(reset());
        setValue("");
      }} className="w-20 h-10 p-2 text-white rounded-md outline-1 outline-violet-500

 outline mb-7 bg-violet-900">
        Reset
      
      

        Counter cannot be less than 0
      
    
  );
}

export default Counter;

7. الخاتمة والمراجع

Redux هي مكتبة قوية لإدارة الحالة في تطبيقاتك. من خلال فهم الإجراءات والمخفضات والمتجر وكيفية ربط كل شيء بمكونات React الخاصة بك، يمكنك إنشاء تطبيقات يمكن التنبؤ بها وقابلة للصيانة.

النقاط الرئيسية:

• الإجراءات: تحديد ما يجب أن يحدث في تطبيقك.
• المخفضات: تحديد كيفية تغير الحالة استجابةً للإجراءات.
• المتجر: يحمل الحالة ويتعامل مع الإجراءات.
• المزود: يمرر المتجر إلى مكونات React الخاصة بك.

لمزيد من المعلومات، راجع وثائق Redux الرسمية:

• وثائق الإعادة
• وثائق مجموعة أدوات الإعادة
• وثائق رد الفعل والإعادة

باتباع هذا الدليل، يجب أن يكون لديك فهم قوي لـ Redux وأن تكون قادرًا على تنفيذه في تطبيقاتك الخاصة.