هوک useReducer در ری اکت جی اس (react js)

روش استفاده از useReducer

ساختار پایه‌ی استفاده از این هوک به شکل زیره:

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

• state — وضعیت فعلی یا داده‌ای که کنترلش با reducer انجام میشه.
• dispatch — تابعی برای ارسال اکشن (دستور تغییر state).
• reducer — تابعی که تعیین می‌کنه هر اکشن چه تغییری در state بده.

مثال ساده از useReducer

فرض کن یه شمارنده داری و می‌خوای دکمه‌های افزایش و کاهش براش بسازی. به‌جای چند تا useState جدا، می‌تونی از useReducer استفاده کنی تا کدت ساختارمندتر بشه:

import { useReducer } from "react";

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    case "decrement":
      return { count: state.count - 1 };
    case "reset":
      return { count: 0 };
    default:
      return state;
  }
}

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

  return (
    <div>
      <h3>شمارنده: {state.count}</h3>
      <button onClick={() => dispatch({ type: "increment" })}>افزایش</button>
      <button onClick={() => dispatch({ type: "decrement" })}>کاهش</button>
      <button onClick={() => dispatch({ type: "reset" })}>ریست</button>
    </div>
  );
}
      

در این مثال، منطق تغییر state فقط در تابع reducer متمرکز شده، که نگهداری و توسعه‌ی کد رو بسیار راحت‌تر می‌کنه.

مزایای استفاده از useReducer

• ساختار منظم‌تر: منطق تغییر state از بدنه‌ی کامپوننت جدا میشه.
• قابلیت تست راحت تر: چون reducer تابع خالصه، می‌تونی به‌راحتی تستش کنی.
• مناسب stateهای پیچیده: وقتی چند state به هم وابسته هستن، useReducer خیلی مؤثرتر از useState عمل می‌کنه.
• هماهنگ با Context: در پروژه‌های بزرگ، می‌تونی با Context API ترکیبش کنی تا state سراسری و ساختار شبیه Redux بسازی.

تفاوت useReducer و useState

useState برای stateهای ساده و سریع عالیه، ولی وقتی منطق تغییر داده‌ها پیچیده‌تر میشه یا چند مقدار به‌هم وابسته داری، useReducer انتخاب حرفه‌ای‌تریه.

این هوک بهت اجازه میده منطق تغییر state رو در یک مکان متمرکز کنی و کنترل بیشتری روی جریان داده‌ها داشته باشی.

ترکیب useReducer با Context API

یکی از قوی‌ترین ترکیب‌ها در React استفاده همزمان از useReducer و Context API است. این ترکیب باعث میشه بدون نیاز به Redux، state سراسری (global) ایجاد کنی.

const AppContext = createContext();

function AppProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <AppContext.Provider value={{ state, dispatch }}>
      {children}
    </AppContext.Provider>
  );
}
      

این الگو توی پروژه‌های متوسط و بزرگ خیلی کاربردیه، چون بدون افزونه‌ی خارجی، ساختار مدیریت state حرفه‌ای بهت میده.

سوالات متداول

چه زمانی از useReducer استفاده کنم؟

وقتی منطق تغییر state پیچیده‌ست یا چند state به هم وابسته‌ان.

می‌تونم با async کارها ازش استفاده کنم؟

بله، فقط باید عملیات async بیرون از reducer انجام بشه و نتیجه‌ش با dispatch تغییر داده بشه.

آیا useReducer جایگزین Redux هست؟

برای پروژه‌های کوچک تا متوسط بله، ولی در پروژه‌های خیلی بزرگ Redux ابزارهای حرفه‌ای‌تری داره.

منبع رسمی؟

React Docs: useReducer

جمع‌بندی

هوک useReducer ابزار قدرتمندی برای مدیریت stateهای پیچیده در Reactه و وقتی در کنار Context API استفاده بشه، جایگزین سبک و تمیزی برای Redux خواهد بود.

اگه پروژه‌ت در حال رشد و پیچیده‌تر شدن هست، همین الان استفاده از useReducer رو شروع کن تا ساختار تمیز، قابل نگهداری و سئوی قوی‌تری برای سایتت داشته باشی.