العودة للمقالات

إدارة الحالة الحديثة في React: Redux Toolkit مقابل Zustand

Majd Muhtaseb06‏/10‏/20257 دقيقة

مقدمة

تعد إدارة الحالة أمرًا بالغ الأهمية لبناء تطبيقات React معقدة. في حين أن hooks المدمجة في React useState و useContext كافية للمشاريع الصغيرة، غالبًا ما تستفيد التطبيقات الأكبر حجمًا من مكتبات إدارة الحالة المخصصة. تقارن هذه المقالة بين خيارين شائعين: Redux Toolkit و Zustand.

Redux Toolkit

يبسط Redux Toolkit تطوير Redux من خلال توفير مجموعة من الأدوات والاصطلاحات التي تقلل من التعليمات البرمجية النمطية. يتضمن configureStore و createSlice و createAsyncThunk لتبسيط أنماط Redux الشائعة.

مثال:

// store.js
import { configureStore, createSlice } from '@reduxjs/toolkit';

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

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

export const store = configureStore({
  reducer: {
    counter: counterSlice.reducer,
  },
});

// Component.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store';

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

  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <span>{count}</span>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

export default Counter;

Zustand

Zustand هي مكتبة إدارة حالة صغيرة وسريعة وغير متحيزة. يركز على البساطة والحد الأدنى من التعليمات البرمجية النمطية. يستخدم أسلوبًا وظيفيًا لتحديثات الحالة.

مثال:

import { create } from 'zustand'

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))


function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <button onClick={increment}>+</button>
      <span>{count}</span>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

مقارنة

| الميزة | Redux Toolkit | Zustand | |-------------------|----------------------------------------------------|---------------------------------------------| | التعليمات البرمجية النمطية | أقل مقارنة بـ Redux ، ولكنها لا تزال موجودة | الحد الأدنى | | منحنى التعلم | متوسط | منخفض | | الحجم | أكبر | أصغر | | النظام البيئي | واسع النطاق (نظام Redux البيئي) | ينمو | | التصحيح | Redux DevTools | Zustand Devtools (اختياري) | | عدم القابلية للتغيير | يتم فرضه عبر Immer | يتم تشجيعه ، ولكن لا يتم فرضه افتراضيًا | | الإجراءات غير المتزامنة | دعم مدمج عبر createAsyncThunk | يتطلب وسيطة أو تنفيذ مخصص |

خاتمة

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