روش‌های مختلف مدیریت وضعیت (State Management) در ری‌اکت

مدیریت وضعیت (State Management) در React

در React، مدیریت وضعیت (State Management) از اهمیت بالایی برخوردار است، زیرا داده‌ها باید بین کامپوننت‌های مختلف به‌درستی مدیریت و به‌روزرسانی شوند. بسته به پیچیدگی، مقیاس پروژه و نیاز به اشتراک‌گذاری داده‌ها، روش‌های مختلفی برای مدیریت استیت وجود دارد.

---

۱. استفاده از State محلی (useState, useReducer)

✅ مناسب برای: استیت‌هایی که فقط درون یک کامپوننت استفاده می‌شوند.

✅ مثال‌های رایج:

مدیریت ورودی‌های فرم

سوئیچ‌های UI مانند نمایش/مخفی‌سازی یک منو

🔹 مثال useState:

function Counter() {

  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

✅ اگر استیت فقط در یک کامپوننت استفاده می‌شود و نیاز به اشتراک‌گذاری ندارد، useState بهترین گزینه است.

---

۲. Context API (همراه با useContext)

✅ مناسب برای: اشتراک‌گذاری داده بین چندین کامپوننت بدون نیاز به استفاده از استیت منیجرهای خارجی

✅ مثال‌های رایج:

مدیریت تم (Dark/Light Mode)

اطلاعات کاربری (مانند نام کاربر، وضعیت ورود)

🔹 مثال:

const ThemeContext = createContext();

function ThemeProvider({ children }) {

  const [theme, setTheme] = useState("light");

  return (

    <ThemeContext.Provider value={{ theme, setTheme }}>

      {children}

    </ThemeContext.Provider>

  );

}

function ThemeSwitcher() {

  const { theme, setTheme } = useContext(ThemeContext);

  return (

    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>

      Switch to {theme === "light" ? "Dark" : "Light"} Mode

    </button>

  );

}

✅ اگر نیاز به اشتراک‌گذاری مقدار در چندین کامپوننت دارید ولی استیت پیچیده نیست، Context API گزینه‌ی مناسبی است.

---

۳. Redux (با Redux Toolkit)

✅ مناسب برای: پروژه‌های بزرگ که نیاز به مدیریت استیت مرکزی و پیش‌بینی‌پذیر دارند

✅ مثال‌های رایج:

مدیریت احراز هویت کاربران در کل برنامه

مدیریت سبد خرید در فروشگاه‌های اینترنتی

🔹 مثال با Redux Toolkit:

import { createSlice, configureStore } from "@reduxjs/toolkit";

import { Provider, useDispatch, useSelector } from "react-redux";

// تعریف Slice

const counterSlice = createSlice({

  name: "counter",

  initialState: { count: 0 },

  reducers: {

    increment: (state) => { state.count += 1 },

  }

});

// ایجاد Store

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

function Counter() {

  const count = useSelector((state) => state.counter.count);

  const dispatch = useDispatch();

  return <button onClick={() => dispatch(counterSlice.actions.increment())}>Count: {count}</button>;

}

export default function App() {

  return (

    <Provider store={store}>

      <Counter />

    </Provider>

  );

}

✅ برای پروژه‌های بزرگ که نیاز به ساختار سازمان‌یافته، دیباگ قوی (Redux DevTools) و مقیاس‌پذیری دارند، Redux بهترین انتخاب است.

---

۴. Recoil

✅ مناسب برای: مدیریت استیت بهینه و ساده‌تر نسبت به Redux

✅ مثال‌های رایج:

مدیریت فرم‌های پیچیده با فیلدهای وابسته

مدیریت داده‌های پویا و متغیر در داشبوردهای پیچیده

🔹 مثال:

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

const countState = atom({

  key: "count",

  default: 0,

});

function Counter() {

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

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

export default function App() {

  return (

    <RecoilRoot>

      <Counter />

    </RecoilRoot>

  );

}

✅ مناسب برای پروژه‌هایی که به استیت سراسری نیاز دارند اما نمی‌خواهند پیچیدگی Redux را داشته باشند.

---

۵. Zustand

✅ مناسب برای: مدیریت استیت سبک و سریع بدون نیاز به Provider

✅ مثال‌های رایج:

مدیریت سبد خرید با ساختار ساده

مدیریت استیت در بازی‌های مبتنی بر React

🔹 مثال:

import create from "zustand";

const useStore = create((set) => ({

  count: 0,

  increment: () => set((state) => ({ count: state.count + 1 })),

}));

function Counter() {

  const { count, increment } = useStore();

  return <button onClick={increment}>Count: {count}</button>;

}

✅ مناسب برای پروژه‌هایی که نیاز به مدیریت استیت ساده و کارآمد دارند.

---

۶. Jotai

✅ مناسب برای: مدیریت استیت مدرن، سبک و بدون Provider

✅ مثال‌های رایج:

مدیریت داده‌های لحظه‌ای در برنامه‌های تعاملی

مدیریت داده‌های فرم‌های پیچیده

🔹 مثال:

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {

  const [count, setCount] = useAtom(countAtom);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

✅ برای پروژه‌هایی که نیاز به مدیریت استیت ساده، منعطف و بدون پیچیدگی دارند، Jotai گزینه‌ی مناسبی است.

---

مقایسه روش‌های مدیریت استیت در React

---

جمع‌بندی: چه روشی را انتخاب کنیم؟

✔ استیت‌های ساده در یک کامپوننت: useState یا useReducer

✔ استیت‌های ساده که بین چندین کامپوننت به اشتراک گذاشته می‌شوند: Context API

✔ مدیریت استیت سراسری در پروژه‌های بزرگ: Redux Toolkit

✔ مدیریت استیت سراسری سبک و ساده‌تر: Recoil

✔ مدیریت استیت بسیار سبک و سریع: Zustand

✔ مدیریت استیت مدرن و ساده با کمترین پیچیدگی: Jotai

نتیجه:

اگر پروژه‌ی شما بزرگ است، Redux بهترین گزینه است، اما برای پروژه‌های کوچک و متوسط گزینه‌هایی مثل Recoil, Zustand یا Jotai ساده‌تر و بهینه‌تر هستند.

روش‌های مختلف مدیریت وضعیت (State Management) در React

مدیریت وضعیت در React یکی از چالش‌های مهم در توسعه برنامه‌های بزرگ است. بسته به میزان پیچیدگی، اشتراک‌گذاری داده‌ها و مقیاس پروژه، روش‌های مختلفی برای مدیریت استیت وجود دارد.

---

۱. استفاده از State محلی (useState, useReducer)

✔ مناسب برای: کامپوننت‌هایی که استیت آن‌ها محلی است و نیاز به اشتراک‌گذاری بین کامپوننت‌ها ندارند.

✔ مزایا: سادگی، عملکرد بالا

✔ معایب: عدم اشتراک‌گذاری استیت بین کامپوننت‌ها

🔹 مثال useState:

function Counter() {

  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

🔹 مثال useReducer:

function reducer(state, action) {

  switch (action.type) {

    case "increment":

      return { count: state.count + 1 };

    default:

      return state;

  }

}

function Counter() {

  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return <button onClick={() => dispatch({ type: "increment" })}>Count: {state.count}</button>;

}

✅ بهترین گزینه برای مدیریت استیت‌های ساده و محلی است.

---

۲. Context API (همراه با useContext)

✔ مناسب برای: اشتراک‌گذاری استیت بین چندین کامپوننت بدون استفاده از استیت منیجرهای خارجی

✔ مزایا: سبک، بدون نیاز به نصب پکیج خارجی

✔ معایب: مناسب برای پروژه‌های کوچک، کندی در صورت تغییرات مکرر

🔹 مثال:

const ThemeContext = createContext();

function ThemeProvider({ children }) {

  const [theme, setTheme] = useState("light");

  return (

    <ThemeContext.Provider value={{ theme, setTheme }}>

      {children}

    </ThemeContext.Provider>

  );

}

function ThemeSwitcher() {

  const { theme, setTheme } = useContext(ThemeContext);

  return (

    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>

      Switch to {theme === "light" ? "Dark" : "Light"} Mode

    </button>

  );

}

✅ مناسب برای استیت‌هایی که بین چندین کامپوننت به اشتراک گذاشته می‌شوند، اما تغییرات زیادی ندارند.

---

۳. Redux (با Redux Toolkit)

✔ مناسب برای: پروژه‌های متوسط تا بزرگ که نیاز به مدیریت استیت پیچیده و اشتراک‌گذاری آن در سطح اپلیکیشن دارند

✔ مزایا: ساختار منظم، دیباگ قوی (Redux DevTools)، مقیاس‌پذیری بالا

✔ معایب: پیچیدگی راه‌اندازی، کد نویسی بیشتر نسبت به روش‌های دیگر

🔹 مثال با Redux Toolkit:

import { createSlice, configureStore } from "@reduxjs/toolkit";

import { Provider, useDispatch, useSelector } from "react-redux";

// تعریف Slice

const counterSlice = createSlice({

  name: "counter",

  initialState: { count: 0 },

  reducers: {

    increment: (state) => { state.count += 1 },

  }

});

// ایجاد Store

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

function Counter() {

  const count = useSelector((state) => state.counter.count);

  const dispatch = useDispatch();

  return <button onClick={() => dispatch(counterSlice.actions.increment())}>Count: {count}</button>;

}

export default function App() {

  return (

    <Provider store={store}>

      <Counter />

    </Provider>

  );

}

✅ برای پروژه‌های بزرگ و تیم‌های بزرگ که نیاز به ساختار منظم و دیباگ قوی دارند.

---

۴. Recoil

✔ مناسب برای: جایگزینی مدرن و ساده‌تر برای Redux با مدیریت استیت بهینه‌تر

✔ مزایا: سادگی، بهینه بودن در تغییرات جزیی، عدم نیاز به reducer

✔ معایب: هنوز نسبت به Redux در پروژه‌های بزرگ کمتر استفاده شده است

🔹 مثال:

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

const countState = atom({

  key: "count",

  default: 0,

});

function Counter() {

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

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

export default function App() {

  return (

    <RecoilRoot>

      <Counter />

    </RecoilRoot>

  );

}

✅ مناسب برای پروژه‌هایی که به مدیریت استیت سراسری نیاز دارند اما نمی‌خواهند پیچیدگی Redux را داشته باشند.

---

۵. Zustand

✔ مناسب برای: مدیریت استیت ساده و سبک با API منعطف

✔ مزایا: نوشتار ساده‌تر از Redux و Recoil، عدم نیاز به Provider

✔ معایب: کمتر شناخته‌شده، فقدان برخی قابلیت‌های پیشرفته Redux

🔹 مثال:

import create from "zustand";

const useStore = create((set) => ({

  count: 0,

  increment: () => set((state) => ({ count: state.count + 1 })),

}));

function Counter() {

  const { count, increment } = useStore();

  return <button onClick={increment}>Count: {count}</button>;

}

✅ مناسب برای پروژه‌هایی که نیاز به استیت منیجر سریع، سبک و آسان دارند.

---

۶. Jotai

✔ مناسب برای: مدیریت استیت ریزدانه‌ای (Fine-Grained State Management) به‌صورت بهینه

✔ مزایا: ساختار مدولار، بدون نیاز به Provider، بهینه‌تر از Context API

✔ معایب: نسبتاً جدید و کمتر شناخته‌شده

🔹 مثال:

import { atom, useAtom } from "jotai";

const countAtom = atom(0);

function Counter() {

  const [count, setCount] = useAtom(countAtom);

  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;

}

✅ مناسب برای پروژه‌هایی که نیاز به مدیریت استیت مدرن، ساده و سبک دارند.

---

مقایسه نهایی و انتخاب بهترین گزینه

---

جمع‌بندی (کدام روش را انتخاب کنیم؟)

✔ برای استیت‌های ساده: useState یا useReducer

✔ برای اشتراک‌گذاری استیت کوچک: Context API

✔ برای پروژه‌های بزرگ و مقیاس‌پذیر: Redux Toolkit

✔ برای مدیریت استیت سبک و ساده: Zustand یا Jotai

✔ برای جایگزینی مدرن با Redux: Recoil

نتیجه: اگر پروژه شما بزرگ است، Redux بهترین گزینه است، اما برای پروژه‌های کوچک و متوسط گزینه‌هایی مثل Recoil, Zustand یا Jotai ساده‌تر و بهینه‌تر هستند.