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

ما وراء useState: أنماط متقدمة لإدارة الحالة في React

Majd Muhtaseb05‏/05‏/20257 دقيقة

مقدمة

في حين أن useState مثالي لمكونات React البسيطة ، فإن التطبيقات الأكبر تتطلب حلول إدارة حالة أكثر قوة. تتعمق هذه المقالة في ثلاثة بدائل شائعة: Context API مع useReducer و Zustand.

Context API مع useReducer

تتيح لك Context API مشاركة الحالة عبر شجرة المكونات الخاصة بك دون تمرير الدعائم بشكل مفرط. يتيح الجمع بينه وبين useReducer طريقة منظمة لإدارة تحديثات الحالة المعقدة.

import React, { createContext, useContext, useReducer } from 'react';

const CounterContext = createContext();

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const CounterProvider = ({ children }) => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <CounterContext.Provider value={{ state, dispatch }}>
      {children}
    </CounterContext.Provider>
  );
};

const useCounter = () => {
  const context = useContext(CounterContext);
  if (!context) {
    throw new Error('useCounter must be used within a CounterProvider');
  }
  return context;
};

const Counter = () => {
  const { state, dispatch } = useCounter();

  return (
    <div>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export { CounterProvider, Counter };

لاستخدامه:

import { CounterProvider, Counter } from './CounterContext';

function App() {
  return (
    <CounterProvider>
      <Counter />
    </CounterProvider>
  );
}

export default App;

Zustand

Zustand هو حل صغير وسريع وقابل للتطوير لإدارة الحالة. يستخدم مبادئ Flux مبسطة.

import create from 'zustand';

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

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

  return (
    <div>
      Count: {count}
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

خاتمة

يعتمد اختيار حل إدارة الحالة المناسب على تعقيد التطبيق الخاص بك. يوفر Context API مع useReducer تحكمًا منظمًا ، بينما يوفر Zustand طريقة أبسط وأكثر انسيابية. ضع في اعتبارك هذه الخيارات عندما لم يعد useState كافيًا لمشاريع React الخاصة بك.