إدارة الحالة الحديثة في React: ما وراء Redux

Majd Muhtaseb06‏/07‏/20258 دقيقة

إدارة الحالة الحديثة في React: ما وراء Redux

مقدمة

لطالما كانت Redux عنصرًا أساسيًا في إدارة الحالة في React ، لكن المشهد تطور. يوفر React الحديث أدوات مدمجة قوية ومكتبات خفيفة الوزن يمكن أن تبسط إدارة الحالة في تطبيقك. تستكشف هذه المقالة بدائل لـ Redux ، مع التركيز على Context API و Zustand و Recoil.

Context API

يوفر React's Context API طريقة لمشاركة قيم الحالة بين المكونات دون تمرير الدعائم صراحةً عبر كل مستوى من شجرة المكونات. على الرغم من أنها ليست بديلاً كاملاً لإعدادات Redux المعقدة ، إلا أنها ممتازة للحالة العامة البسيطة أو إدارة السمات.

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

const ThemeContext = createContext();

export function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

الاستخدام:

import { useTheme } from './ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`app ${theme}`}>
      <button onClick={toggleTheme}>تبديل الوضع</button>
    </div>
  );
}

Zustand

Zustand هو حل صغير وسريع وقابل للتطوير لإدارة الحالة. يستخدم عملية إنشاء متجر مبسطة ويتكامل بسهولة مع React.

npm install 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 MyComponent() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <p>العداد: {count}</p>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>إنقاص</button>
    </div>
  );
}

Recoil

Recoil هي مكتبة تجريبية لإدارة الحالة لـ React من Facebook. إنه يعمل ويفكر مثل React. يتيح لك Recoil إنشاء رسم بياني لتدفق البيانات يتدفق من الذرات (الحالة المشتركة) عبر المحددات (الوظائف النقية) وإلى مكونات React الخاصة بك.

npm install recoil

import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
} from 'recoil';

const countState = atom({
  key: 'countState', // مُعرّف فريد (فريد عالميًا)
  default: 0, // القيمة الافتراضية (تُعرف أيضًا بالقيمة الأولية)
});


function MyComponent() {
  const [count, setCount] = useRecoilState(countState);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);

  return (
    <div>
      <p>العداد: {count}</p>
      <button onClick={increment}>زيادة</button>
      <button onClick={decrement}>إنقاص</button>
    </div>
  );
}

function App() {
  return (
    <RecoilRoot>
      <MyComponent />
    </RecoilRoot>
  );
}

خاتمة

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