مدیریت وضعیت در React

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

در برنامه‌های کوچک، مدیریت داده‌ها (state) در سطح کامپوننت کافی است. اما وقتی اپلیکیشن بزرگ‌تر و پیچیده‌تر می‌شود، نیاز به یک راهکار متمرکز برای مدیریت وضعیت داریم. اینجاست که مفاهیمی مانند Context API، Redux و سایر ابزارهای مدیریت state وارد میدان می‌شوند.

در این فصل با روش‌های اصلی مدیریت وضعیت در React آشنا می‌شویم.

 Context API و استفاده عملی

Context API ابزاری داخلی در React برای اشتراک‌گذاری داده‌ها بین کامپوننت‌ها، بدون نیاز به ارسال props به هر سطح است.

ساختار ساده Context:

const ThemeContext = createContext();
function App() {
  return (
    
      
    
  );
}
function Toolbar() {
  const theme = useContext(ThemeContext);
  return 
تم فعلی: {theme}
;
}

مناسب برای داده‌هایی مثل زبان، تم، وضعیت ورود کاربر
مدیریت تغییرات پیچیده با Context ممکن است سخت شود

useReducer برای مدیریت وضعیت پیچیده

useReducer گزینه‌ای قدرتمندتر از useState است و برای مدیریت state‌های تو در تو و چندمرحله‌ای کاربرد دارد.

const initialState = { count: 0 };
function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}


const [state, dispatch] = useReducer(reducer, initialState);

مناسب برای فرم‌های بزرگ، کامپوننت‌های پیچیده، یا حالت‌های مختلف
ترکیب عالی با Context API برای ساخت state global ساده

معرفی کتابخانه‌های مدیریت وضعیت

Redux

Redux یکی از قدیمی‌ترین و پایدارترین ابزارهای مدیریت state در اکوسیستم React است.

- ساختار مبتنی بر store، action، reducer

- پشتیبانی قوی از ابزارهای توسعه (Redux DevTools)

- مناسب برای پروژه‌های بزرگ و تیمی

 Zustand

Zustand یک کتابخانه سبک و مدرن است که با کمترین کد، state global ایجاد می‌کند.

npm install zustand

import { create } from "zustand";
const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
}));
const count = useStore(state => state.count);

- بسیار ساده‌تر از Redux
- بدون boilerplate
- مناسب برای پروژه‌های کوچک تا متوسط

استفاده از Redux Toolkit

Redux Toolkit نسخه مدرن‌تر و ساده‌تر شده‌ی Redux است که بسیاری از boilerplateها را حذف کرده:

npm install @reduxjs/toolkit react-redux

// store.js
import { configureStore, createSlice } from "@reduxjs/toolkit";
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value += 1 }
  }
});
export const { increment } = counterSlice.actions;
export const store = configureStore({
  reducer: { counter: counterSlice.reducer }
});

// App.jsx
import { useDispatch, useSelector } from "react-redux";
const count = useSelector(state => state.counter.value);
const dispatch = useDispatch();
 dispatch(increment())}>+

- ساده، قدرتمند، دارای ابزارهای dev
- ساختار ماژولار و خوانا
- بهترین گزینه برای استفاده حرفه‌ای با Redux

جمع‌بندی

در این فصل یاد گرفتیم که:

- Context API برای اشتراک‌گذاری داده در کامپوننت‌ها مفید است.

- useReducer برای کنترل وضعیت‌های پیچیده‌تر در کنار Context کاربرد دارد.

- برای پروژه‌های پیشرفته‌تر، ابزارهایی مثل Redux Toolkit و Zustand راهکارهایی مدرن، تست‌پذیر و توسعه‌پذیر ارائه می‌دهند.