Redux Toolkit هي الطريقة الرسمية الموصى بها لكتابة منطق Redux. فهو يوفر إعدادات افتراضية جيدة لإعداد المتجر خارج الصندوق، ويتضمن إضافات Redux المدمجة الأكثر استخدامًا. في هذه المدونة، سنتعرف على أساسيات دمج Redux Toolkit مع تطبيق React.

ما هي مجموعة أدوات ريدوكس؟

Redux Toolkit عبارة عن مجموعة من الأدوات التي تساعد على تبسيط عملية كتابة منطق Redux. يتضمن أدوات مساعدة لتبسيط حالات الاستخدام الشائعة مثل إعداد المتجر، وإنشاء مخفضات، وكتابة منطق التحديث غير القابل للتغيير.

إعداد مجموعة أدوات Redux باستخدام React

فلنستعرض خطوات إعداد Redux Toolkit في تطبيق React.

الخطوة 1: تثبيت التبعيات

أولاً، تحتاج إلى تثبيت الحزم الضرورية. يمكنك القيام بذلك باستخدام npm أو الغزل.

npm install @reduxjs/toolkit react-redux

الخطوة 2: إنشاء متجر Redux

المتجر هو الكائن الذي يضفي الحيوية على Redux. باستخدام Redux Toolkit، يمكنك إنشاء متجر باستخدام وظيفةconfigStore.

// src/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';

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

export default store;

الخطوة 3: إنشاء شريحة

الشريحة عبارة عن مجموعة من منطق وإجراءات مخفض Redux لميزة واحدة في تطبيقك. تعمل وظيفة createSlice في Redux Toolkit على إنشاء منشئي الإجراءات وأنواع الإجراءات تلقائيًا.

// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0,
  },
  reducers: {
    increment: (state) => {
      state.value  = 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
  },
});

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

export default counterSlice.reducer;

الخطوة 4: قم بتوفير المتجر لتطبيق React الخاص بك

لجعل متجر Redux متاحًا لمكونات React الخاصة بك، تحتاج إلى استخدام مكون Provider من React-redux.

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

الخطوة 5: قم بتوصيل مكونات React بمتجر Redux

لربط مكون React بمتجر Redux، يمكنك استخدام useSelector وخطافات useDispatch من React-Redux.

// src/components/Counter.jsx
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from '../features/counter/counterSlice';

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}
       dispatch(increment())}>Increment
       dispatch(decrement())}>Decrement
    
  );
}

export default Counter;

الخطوة 6: استخدم المكون المتصل في تطبيقك

أخيرًا، يمكنك استخدام المكون المتصل في تطبيقك.

// src/App.js
import Counter from './components/Counter';

function App() {
  return (
    

      
    
  );
}

export default App;

خاتمة

باتباع هذه الخطوات، يمكنك إعداد Redux Toolkit في تطبيق React الخاص بك لإدارة الحالة بطريقة يمكن التنبؤ بها وقابلة للصيانة. تعمل مجموعة أدوات Redux على تبسيط العديد من المهام الشائعة عند العمل مع Redux، مما يسهل كتابة منطق Redux والحفاظ عليه.

مزيد من الاستكشاف

بالنسبة لأولئك الذين يريدون التعمق في Redux Toolkit وReact، إليك بعض الموارد القيمة:

• وثائق مجموعة أدوات Redux: توفر الوثائق الرسمية أدلة شاملة ومراجع API.
  • وثائق مجموعة أدوات الإعادة
• وثائق React Redux: تعرف على المزيد حول كيفية استخدام Redux مع React.
  • وثائق رد الفعل المسترجع
• البرنامج التعليمي لأساسيات Redux: برنامج تعليمي خطوة بخطوة لمساعدتك على العمل باستخدام Redux Toolkit.
  • البرنامج التعليمي لأساسيات الإعادة
• البرنامج التعليمي لأساسيات Redux: برنامج تعليمي مفصل يغطي المفاهيم الأساسية لـ Redux.
  • البرنامج التعليمي لأساسيات Redux

شكرًا على القراءة!
بو.