قلاب های پشت صحنه 4 ، usereducer

هی رمزگذار !!!
در این پست جدید React ، ما قلاب مفید دیگر را بررسی خواهیم کرد …
usereducer.-
👉🏻 اگر خود را می بینید که چندین قطعه دولتی را که به منطق پیچیده متکی هستند ، پیگیری می کنند.
- مدیریت حالت پیچیده در برنامه های React
- مانند یک مدیریت دولتی (Redux و غیره) کار می کند.
اصول:
usereducer (کاهش دهنده ، InitialState)
عملکرد کاهش دهنده شامل منطق حالت سفارشی شما است و StateState می تواند یک مقدار ساده باشد اما به طور کلی حاوی یک شی خواهد بود.
Hook UserEducer حالت فعلی و یک روش اعزام را برمی گرداند.
👉🏻 مثل همیشه بهترین راه برای یادگیری با برخی از کد ها است.
نتیجه این کد خواهد بود:
ما می توانیم تعداد محبوب را با دو دکمه ، افزایش و کاهش ببینیم.
1 بیایید با یک حالت اولیه و عملکرد کاهش دهنده شروع کنیم.
const initialState = {count: 0};
const reducer = (state, action) => {
switch (action.type) {
case 'increase':
return { count: state.count + 1 }
case 'decrease':
return { count: state.count - 1 }
default:
return state;
}
}
این بخش از کد در برنامه اصلی کمک خواهد کرد
const [state, dispatch] = useReducer(reducer, initialState);
2 توابع invesecount و decreasecount را با اعزام ایجاد کنید:
const increaseCount = () => {
dispatch({ type: 'increase' });
}
const decreaseCount = () => {
dispatch({ type: 'decrease' });
}
3 سرانجام قسمت بازگشت:
ما دو دکمه را نشان می دهیم و پس از کلیک بر روی افزایش ، و Decreasecount اجرا می شود.
برای انجام کار می توانیم پیشرفت هایی مانند ایجاد یک شی برای رشته های “افزایش” و “کاهش” را اضافه کنیم.
در اینجا نسخه کامل کد را دارید:
import { useReducer } from "react";
const ACTION = {
INCREASE: "increase",
DECREASE: "decrease",
};
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case ACTION.INCREASE:
return { count: state.count + 1 };
case ACTION.DECREASE:
return { count: state.count - 1 };
default:
return state;
}
};
export default function App() {
const [state, dispatch] = useReducer(reducer, initialState);
const increaseCount = () => {
dispatch({ type: ACTION.INCREASE });
};
const decreaseCount = () => {
dispatch({ type: ACTION.DECREASE });
};
return (
<>
Count: {state.count}
>
);
}
نتیجه گیری:
به من اطلاع دهید که آیا این پست برای شما مفید است و همچنین اگر می خواهید بقیه قلاب های مفقود شده را در یکسان بررسی کنید.
یک روز عالی برای برنامه نویسی داشته باشید: D