– درک کاربر در React – Community Dev

useReducer یک قلاب React است که جایگزینی برای آن فراهم می کند useState برای مدیریت منطق پیچیده دولت. این امر به ویژه هنگامی مفید است که انتقال دولت به حالت قبلی بستگی داشته باشد یا چندین حالت زیر را درگیر کند.

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

• کاهش دهنده: تابعی که وضعیت فعلی و یک عمل را به خود اختصاص می دهد ، سپس حالت جدید را برمی گرداند. بر اساس Action.Type ، حالت جدید را برمی گرداند.
• InitialState: مقدار اولیه دولت.
• حالت: ارزش حالت فعلی را در اختیار دارد
• اعزام: تابعی که برای ارسال اقدامات به کاهش دهنده استفاده می شود.

const initialState = {count : 0};

function reducer(state, action) {
   switch (action.type) {
      case "increment":
         // Return a NEW object with the updated property
         return { ...state, count: state.count + action.payload };
      case "decrement":
         return { ...state, count: state.count - action.payload };

      // ❌ ❌ BAD: Returns a number, not the state object shape! AVOID
      // case "increment":
      //   return state.count + action.payload;

      default:
         throw new Error("Unknown action type");
   }
}

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

   const incrementCount = function(){
   //sends an action to the reducer, updating the state accordingly.
      dispatch({ type: "increment", payload: 1 }) 
   }
   const decrementCount = function(){
   //sends an action to the reducer, updating the state accordingly
      dispatch({ type: "decrement", payload: 1 })
   }

   return (
      <button onClick={incrementCount}>+button>
      <span>Count: {state.count}span>
      <button onClick={decrementCount}>-button>
   )
}

📌در reducer باید عملکرد خالص باشد و یک شیء کاملاً جدید را برگرداند.

چگونه usereducer کار می کند: جریان

در اینجا فرآیند گام به گام توضیح می دهد که چگونه اجزای اجزای آن useReducer تعامل:

1. تنظیم اولیه: هنگامی که مؤلفه شما برای اولین بار ارائه می شود ، useReducer با شما فراخوانده می شود Reducer Function و initialStateبشر جریان را برمی گرداند State Object (که initialState در ابتدا) و Dispatch Functionبشر

2. ماشه رویداد: اتفاقی در برنامه شما رخ می دهد که نیاز به تغییر حالت دارد (به عنوان مثال ، کاربر روی یک دکمه ، انواع در یک قسمت ، داده ها وارد می شود).

3. اعزام یک عمل: کنترل کننده رویداد برای آن رویداد تماس می گیرد Dispatch Functionبشر شما عبور می کنید Action Object به dispatchبشر این Action Object حاوی اطلاعاتی در مورد چه تغییر باید اتفاق بیفتد ( type) و هر داده مورد نیاز برای آن تغییر ( payload).

   • مثال: dispatch({ type: 'INCREMENT', payload: 1 })

4. کاهش دهنده به نام: واکنش نشان می دهد Action Object شما اعزام کردید و با خود تماس می گیرید Reducer Functionبشر این دو آرگومان را برای کاهش دهنده شما ارائه می دهد:

   • در جاری State Objectبشر
   • در Action Object شما فقط اعزام کردید.
   • مثال: reducer(currentState, { type: 'INCREMENT', payload: 1 })

5. محاسبه حالت جدید: درون شما Reducer Function، شما از action.type (و action.payload در صورت لزوم) برای تعیین نحوه محاسبه طرف دیگر دولت بر اساس جاری دولت این به طور معمول با استفاده از a انجام می شود switch بیانیه یا if/else شرایط بر اساس action.typeبشر از نظر مهم ، کاهش دهنده باید خالص باشد و کاملاً برگردد جدید شیء حالت (immutability) ، موجود موجود را تغییر ندهید.

   • مثال: بر { type: 'INCREMENT', payload: 1 }، کاهش دهنده ممکن است برگردد { ...currentState, count: currentState.count + 1 }بشر

6. به روزرسانی حالت: useReducer شیء دولت جدید را که توسط شما برگشته است دریافت می کند Reducer Functionبشر سپس وضعیت داخلی مرتبط با مؤلفه شما را به روز می کند.

7. RE-RENDER: واکنش نشان می دهد که دولت توسط useReducer تغییر کرده است این مؤلفه شما (و به طور بالقوه فرزندان آن) را به آن برنامه ریزی می کند دوباره دادنبشر هنگامی که مؤلفه دوباره رد می شود ، useReducer هوک اکنون باز می گردد به روز شده State Object از مرحله 6 ، UI شما اطلاعات را بر اساس این حالت جدید نمایش می دهد.

بنابراین ، useReducer یک چرخه ساختاری را فراهم می کند: an action در حال توصیف یک تغییر در نظر گرفته شده است -> reducer function حالت جدید را بر اساس وضعیت فعلی و عمل محاسبه می کند -> React به روز می کند state -> مؤلفه مجدداً با حالت جدید در dispatch function ماشه ای است که این چرخه را شروع می کند.

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

• هنگامی که انتقال حالت پیچیده تر است (زنجیره های ایز یا به روزرسانی های چندگانه مرتبط).
• هنگامی که به مدیریت دولت متمرکز نیاز دارید.
• شما چندین متغیر حالت مرتبط دارید.
• به روزرسانی های حالت وابسته به هم هستند.
• وقتی وضعیت بعدی به وضعیت قبلی بستگی دارد.
• شما می خواهید اجزای خود را تمیز تر و خواندنی تر نگه دارید.

چرا استفاده کنید useReducer❓

در حالی که useState برای مدیریت حالت ساده کافی است ، می تواند دست و پا گیر شود وقتی:

• این مؤلفه دارای چندین متغیر حالت است.
• به روزرسانی های دولتی در بین چندین رویداد رویداد پراکنده می شوند.
• به روزرسانی های چند حالته باید در پاسخ به یک رویداد همزمان اتفاق بیفتد.
• به روزرسانی های حالت به متغیرهای حالت دیگر بستگی دارد. در این موارد ، useReducer به سازماندهی به روزرسانی های حالت به روشی ساخت یافته تر کمک می کند.

🧭 چه موقع از چه چیزی استفاده کنیم؟

✅ نتیجه گیری

در useReducer هوک یک جایگزین قوی برای useState، به ویژه مناسب برای مدیریت منطق و سناریوهای پیچیده دولت که در آن حالت بعدی به برنامه قبلی بستگی دارد. با متمرکز کردن انتقال حالت در یک عملکرد کاهش دهنده خالص ، useReducer پاک کننده تر ، کد نگهدارنده تر را ترویج می کند و پیش بینی تغییرات حالت را بهبود می بخشد.

این یک انتخاب عالی است وقتی:

• شما چندین بخش مرتبط با آن دارید.
• به روزرسانی های حالت وابسته به هم وابسته یا پیچیده هستند.
• شما می خواهید منطق حالت را از منطق UI برای خوانایی بهتر جدا کنید.

درک useReducer نه تنها به ساختار ساختار دولت به طور مؤثرتری در مؤلفه ها کمک می کند ، بلکه پایه و اساس محکمی برای کار با ابزارهای پیشرفته تر مانند Reduxبشر

لایک ، نظرات و بازخورد خوش آمدید!

برنامه نویسی مبارک!