الغرض من مجموعة أدوات Redux

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

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

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

الفوائد الرئيسية لمجموعة أدوات Redux:

1. رمز معياري أقل: إزالة الحاجة إلى منشئي الإجراءات والثوابت.
2. إعداد متجر مبسط: يوفر واجهة برمجة تطبيقات واحدة لتكوين المتجر باستخدام الإعدادات الافتراضية المعقولة.
3. دعم مدمج للثبات وأدوات DevTools: تمكين Redux DevTools تلقائيًا ويتكامل مع Immer للثبات.
4. دعم أفضل لـ TypeScript: يوفر كتابة أفضل ويتكامل بشكل جيد مع TypeScript.

يمكننا استخدام مجموعة أدوات الإعادة مع أي مكتبة جافا سكريبت لذلك نقوم بإعداد مجموعة أدوات الإعادة مع رد الفعل.

إعداد مجموعة أدوات Redux في تطبيق React

الخطوة 1: إنشاء مشروع React جديد

أولاً، لنقم بإنشاء تطبيق React جديد. يمكنك استخدام create-react-app أو Vite لهذا الغرض. سنستخدم تطبيق create-react-app هنا للتبسيط.

npx create-react-app redux-toolkit-example
cd redux-toolkit-example

الخطوة 2: تثبيت مجموعة أدوات Redux وReact-Redux

بعد ذلك، قم بتثبيت الحزم الضرورية: @reduxjs/toolkit وreact-redux.

npm install @reduxjs/toolkit react-redux

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

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

الخطوة 1: إنشاء شريحة
لنقم بإنشاء شريحة عداد بسيطة. قم بإنشاء ملف جديد باسم counterSlice.js داخل دليل الميزات/العداد:

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

const initialState = {
  value: 0,
};

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

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

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

1. تهيئة متجر Redux

الآن بعد أن حصلنا على شريحتنا، فلنقم بتهيئة متجر Redux. توفر مجموعة أدوات Redux وظيفة configStore التي تقوم بإعداد المتجر باستخدام الإعدادات الافتراضية الجيدة.

الخطوة 1: إنشاء متجر
قم بإنشاء ملف store.js داخل دليل التطبيق:

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

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

export default store;

الخطوة 2: توفير المتجر لتطبيقك
قم بتغليف تطبيق React الخاص بك في مكون من رد فعل ردكس وقم بتمريره إلى المتجر. قم بتحديث ملف Index.js:

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

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

1. توصيل المكونات بالمتجر

للتفاعل مع متجر Redux، استخدم useSelector وخطافات useDispatch المقدمة من React-Redux.
الخطوة 1: الوصول إلى الحالة باستخدام useSelector
استخدم ربط useSelector للوصول إلى الحالة من المتجر

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

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

  return (
    

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

export default Counter;

الخطوة 2: استخدام مكون العداد في تطبيقك
قم باستيراد واستخدام مكون العداد في مكون التطبيق الرئيسي الخاص بك:

// src/App.js
import React from 'react';
import Counter from './features/counter/Counter';

function App() {
  return (
    

      
  );
}

export default App;

1. الخاتمة والخطوات التالية

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

ترقبوا الجزء الثاني: مجموعة أدوات Redux المتقدمة - المنطق غير المتزامن مع createAsyncThunk!