useReducer Hook

کار با useReducer Hook

دوباره سلام این بار هم اومدم با یه هوک خیلی جذاب ریکت

ما برای مدیریت کردن state های برناممون چند تا راه داریم که یکیش استفاده از هوک خود ریکته : useReducer

خب ابتدا از ریکت ایمپورت میکنیم:

import { useReducer} from 'react';

خب حالا میریم کامپوننتمون رو اماده کنیم برای استفاده

قدم دوم از useReducer مقادیری که باید استفاده کنیم را distruct میکنیم شبیه useState

const init=[{}];
const [state, dispatch] = useReducer(reduce, init);

یه مقدار inialState هم میذاریم.

اینجا reduce چیست؟

یه تابع که میتونیم استیت ها رو هر تغییری که میخواهیم روشون پیاده سازی کنیم

const getState = (data) => {
dispatch({ type: &quotADD&quot,payload:data});
};

در اینجا ما dispatch مون رو با اکشن دلخواه صدا میزنیم و payload مون پر میشه از دیتیایی که بهش میدیم

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

 const reduce = (state, action) => {
switch (action.type) {
case &quotADD&quot:
return [{action.payload}};
default:
return state;
}
};

به همین راحتی

این یه مثال خیلی ساده بود از useReducer

امیدوارم براتون مفید واقع باشه هر انتقادی بود لطفا کامنت کنید.