مدیریت پیشرفته وضعیت در React – استفاده از useReducer برای انتقال‌های پیچیده

مقدمه

هوک useState در React برای مدیریت وضعیت‌های ساده بسیار مناسب است. اما زمانی که چند وضعیت به هم وابسته یا مرتبط باشند، استفاده از useReducer انتخاب بهتری خواهد بود. در این مقاله، وضعیت لیست داستان‌ها را از useState به useReducer منتقل می‌کنیم و نحوهٔ مدیریت انتقال‌های مختلف را بررسی می‌کنیم.

تعریف تابع reducer

تابع reducer خارج از کامپوننت تعریف می‌شود و دو آرگومان state و action دریافت می‌کند. سپس بر اساس نوع اکشن، وضعیت جدید را بازمی‌گرداند:

const storiesReducer = (state, action) => {
  switch (action.type) {
    case 'SET_STORIES':
      return action.payload;
    case 'REMOVE_STORY':
      return state.filter(
        (story) => action.payload.objectID !== story.objectID
      );
    default:
      throw new Error();
  }
};

استفاده از useReducer در کامپوننت

در کامپوننت App، به‌جای useState از useReducer استفاده می‌کنیم:

const [stories, dispatchStories] = React.useReducer(
  storiesReducer,
  []
);

اکنون به‌جای setStories از dispatchStories برای به‌روزرسانی وضعیت استفاده می‌کنیم.

ارسال اکشن‌ها

هنگام دریافت داده، اکشن SET_STORIES را dispatch می‌کنیم:

getAsyncStories()
  .then((result) => {
    dispatchStories({
      type: 'SET_STORIES',
      payload: result.data.stories,
    });
  });

برای حذف یک داستان، اکشن REMOVE_STORY را dispatch می‌کنیم:

const handleRemoveStory = (item) => {
  dispatchStories({
    type: 'REMOVE_STORY',
    payload: item,
  });
};

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

• متمرکز کردن منطق وضعیت در یک مکان
• افزایش خوانایی و نگهداری‌پذیری کد
• پشتیبانی از چندین انتقال مرتبط با یک دامنه
• تشویق به برنامه‌نویسی declarative

جمع‌بندی

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