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

إدارة الحالة الحديثة في رياكت: ما وراء ريدكس

Majd Muhtaseb03‏/11‏/20258 دقيقة

مقدمة

لطالما كانت ريدكس قوة مهيمنة في إدارة حالة رياكت لسنوات. ومع ذلك، فقد تطور نظام رياكت البيئي، مما يوفر بدائل أكثر انسيابية وفعالية. تستكشف هذه المقالة العديد من المناهج الحديثة التي تعالج تعقيدات ريدكس دون التضحية بالتحكم أو قابلية التوسع.

واجهة برمجة تطبيقات السياق (Context API)

توفر واجهة برمجة تطبيقات السياق المضمنة في رياكت طريقة بسيطة وفعالة لمشاركة البيانات بين المكونات دون الحاجة إلى تمرير الخصائص بشكل متكرر.

// إنشاء السياق
import React, { createContext, useContext, useState } from 'react';

const ThemeContext = createContext();

export const useTheme = () => useContext(ThemeContext);

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

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

  const value = { theme, toggleTheme };

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

// استخدام المكون
function MyComponent() {
  const { theme, toggleTheme } = useTheme();

  return (
    <div className={`App ${theme}`}>
      <button onClick={toggleTheme}>تغيير النمط</button>
      <p>النمط الحالي: {theme}</p>
    </div>
  );
}

export default MyComponent;

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

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

export default MyComponent;

Recoil

Recoil هي مكتبة إدارة حالة تم إنشاؤها بواسطة Facebook خصيصًا لـ React. يوفر نهجًا أكثر دقة لإدارة الحالة، مما يسمح لك بتحديد "ذرات" فردية للحالة يمكن للمكونات الاشتراك فيها.

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

const countState = atom({
  key: 'countState',
  default: 0,
});

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

  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  );
}

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

export default App;

Jotai

Jotai هي مكتبة إدارة حالة بسيطة مستوحاة من Recoil. تركز على البساطة والأداء، وتقدم نهجًا مشابهًا قائمًا على الذرات بحجم حزمة أصغر.

import { atom, useAtom } from 'jotai'

const countAtom = atom(0)

function MyComponent() {
  const [count, setCount] = useAtom(countAtom)
  return (
    <div>
      <p>العدد: {count}</p>
      <button onClick={() => setCount(count + 1)}>زيادة</button>
    </div>
  )
}

export default MyComponent;

خاتمة

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