هوک useState در React برای مدیریت وضعیتهای ساده بسیار مناسب است. اما زمانی که چند وضعیت به هم وابسته یا مرتبط باشند، استفاده از useReducer انتخاب بهتری خواهد بود. در این مقاله، وضعیت لیست داستانها را از useState به useReducer منتقل میکنیم و نحوهٔ مدیریت انتقالهای مختلف را بررسی میکنیم.
تابع 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();
}
};در کامپوننت 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 در React امکان مدیریت ساختاریافته و مقیاسپذیر وضعیت را فراهم میکند. با تعریف اکشنهایی مانند SET_STORIES و REMOVE_STORY، میتوان منطق وضعیت را بهصورت خوانا و قابل توسعه مدیریت کرد. این رویکرد برای اپلیکیشنهای بزرگ و پیچیده بسیار مناسب است.