آموزش react - کار با useReducer Hook

اگر شما یک React Developer هستید و هنوز React hooks رو یاد نگرفتید،بهتر است یک زمان را برای یادگرفتن آن در نظر بگیرید.در این مقاله قصد داریم به صورت کامل useReducer Hook در react رو آموزش بدیم.در مطالب قبلی بعضی از Hook ها رو آموزش دادیم و پیشنهاد میکنم که قبل از خوندن ادامه مطلب، این دو مقاله را مطالعه کنید

راهنمای کامل کار با useState Hook در React

راهنمای کامل کار با useEffect Hook در React

نکته : اگر شما به تازگی react رو شروع کردید پیشنهاد میکنم ابتدا Hooks را یاد بگیرید و اگر نیاز شد روش های قدیمی (class component) را یاد بگیرید.

Hooks توابعی هستند که به شما اجازه می دهند تا state ها را مدیریت و از ویژگی lifecycle ها در function component استفاده کنیدHooks در class ها کار نمی کنند.آن ها به شما اجازه می دهند از React بدون class استفاده کنید.

Reducer چیست؟

قبل از اینکه این hook را یاد بگیریم،یک قطعه دیگر وجود دارد که ما باید درک خوبی از آن داشته باشیم. Reducer چیست؟ و چگون می توانیم یک reducer بدون messing up بنویسیم؟

ما می توانیم reducer در Redux را به عنوان یک “Coffee Maker” در نظر بگیریم.اون یک state قدیمی را میگیرد و یک سری عملیات روی آن انجام می دهد و یک state جدید تحویل می دهد(قهوه تازه).

Coffee Maker یا همان قهوه ساز آب و پودر قهوه را می گیرد و یک فتجان قهوه تازه دم شده را بر می گرداند که ما از آن لذت می بریم.

بر اساس این مثال reducers توابعی هستند که current state یعنی پودر قهوه و action یعنی آب را می گیرد و یک state جدید یعنی قهوه تازه ایجاد می کند.

Reducer ها pure functionهایی هستند که state و action را می گیرند و یک state جدید بر می گردانند.اگر در مورد pure function ها اطلاعات کمی دارید، پیشنهاد میکنم مقاله زیر را بخوانید.

Pure Function چیست

یک Reducer همیشه باید از قوانین زیر پیروی کند:

با توجه به مجموعه ای از input ها باید همیشه یک خروچی یکسان داشته باشد، بدون surprises, side effects, API calls, mutations

اگر شما تازه با مفهوم reducer آشنا شدید، پیشنهاد میکنم درس های دوم و سوم دوره آموزش Redux رو تماشا کنید تا به صورت کامل آن را درک کنید.

useReducer Hook چیست؟

useReducer یک hook است که من گاهی اوقات برای مدیریت state ها در React از اون استفاده میکنم.این hook بسیار شبیه به useState است،فقط کمی پیچیده است.این hook به عنوان جایگزین useState برای مدیریت state های پیچیده در React استفاده می شود.

useReducer hook از مفاهیم مشابه reducers در Redux استفاده می کند.اساسا یک pure function بدون side-effects است.

syntax برای useReducer hook به شکل زیر است:

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

1	const [state, dispatch] = useReducer(reducer, initialArg, init);

useReducer اساسا به functional components در React اجازه می دهد تا به reducer functions از state management برنامتون دسترسی داشته باشد.

چگونه از useReducer Hook استفاده کنیم؟

در مطلب قبلی یاد گرفتیم که چطور از useState hook برای استفاده از state در functional React component استفاده کنیم.

حالا همین مفاهیم را برای استفاده از state در functional React component با استفاده از useReducer hook به کار می بریم.

اولین قدم ایمپورت کردن useReducer hook از react است.

import React, { useReducer } from "react";

1	import React, { useReducer } from "react";

حالا باید initial state را مشابه کتابخانه های خارجی مثل Redux مشخص کنیم.

const initialState = { react: false, graphQL: false, angular: false };

1	const initialState = { react: false, graphQL: false, angular: false };

در این مثال از یک کامپوننت ساده با 3 button برای نحوه استفاده از useReducer استفاده می کنیم که با کلیک بر روی هر button عنوان دوره نمایش داده شده فرق می کند.

آموزش جامع React Js

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

const Courses = () => {
  const [state, dispatch] = useReducer(counterReducer, initialState);

  const handleReactPress = () => {
    dispatch({ type: "REACT" });
  };

  const handleGraphQLPress = () => {
    dispatch({ type: "GRAPHQL" });
  };

  const handleAngularPress = () => {
    dispatch({ type: "ANGULAR" });
  };

  return (
    <div className="box">
      <h2>Use Reducer Example Component</h2>
      <p>
        Learning{" "}
        {state.react
          ? "React"
          : state.graphQL
          ? "GraphQL"
          : state.angular
          ? "Angular"
          : "Not Started"}
      </p>
      <div>
        <button
          type="button"
          onClick={handleReactPress}
          className="button is-grey"
        >
          React
        </button>
        <button
          type="button"
          onClick={handleGraphQLPress}
          className="button is-dark"
        >
          GraphQL
        </button>
        <button
          type="button"
          onClick={handleAngularPress}
          className="button is-grey"
        >
          Angular
        </button>
      </div>
    </div>
  );
};

const Courses = () => {

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

const handleReactPress = () => {

dispatch({ type: "REACT" });

};

const handleGraphQLPress = () => {

dispatch({ type: "GRAPHQL" });

};

const handleAngularPress = () => {

dispatch({ type: "ANGULAR" });

};

return (

<h2>Use Reducer Example Component</h2>

<p>

Learning{" "}

{state.react

? "React"

: state.graphQL

? "GraphQL"

: state.angular

? "Angular"

: "Not Started"}

</p>

<div>

<button

type="button"

onClick={handleReactPress}

className="button is-grey"

React

</button>

<button

type="button"

onClick={handleGraphQLPress}

className="button is-dark"

GraphQL

</button>

<button

type="button"

onClick={handleAngularPress}

className="button is-grey"

Angular

</button>

</div>

);

};

کامپوننت ما آماده است و باید reducer را تعریف کنیم.

const coursesReducer = (state, action) => {
  switch (action.type) {
    case "REACT":
      return { react: true };
    case "GRAPHQL":
      return { graphQL: true };
    case "ANGULAR":
      return { angular: true };

    default:
      throw new Error();
  }
};

const coursesReducer = (state, action) => {

switch (action.type) {

case "REACT":

return { react: true };

case "GRAPHQL":

return { graphQL: true };

case "ANGULAR":

return { angular: true };

default:

throw new Error();

}

};

اگر شما با Redux آشنایی داشته باشید یا قبلا با اون کار کرده باشید، خواهید دید که چقدر مشابه هم هستند.reducer به عنوان پارامتر state و action را می گیرد و state را بر اساس dispatch که برای آن مشخص کردیم به روز رسانی می کند.

برای مشاهده کامل کد ها و نحوه کارکرد آن می توانید به این لینک سر بزنید.

آیا هنوز به Redux نیاز داریم؟

حالا این مسئله ما را به سمت یک سوال بزرگ سوق می دهد ، آیا ما دیگر به Redux احتیاج داریم؟

جواب ساده نیست. با معرفی useReducer hook ، ما این امکان را داریم که بدون نیاز به نصب کتابخانه های جانبی مانند Redux ، مقدار عادلانه ای ازstate های پیچیده را مدیریت کنیم. اما این بدان معنا نیست که ما ممکن است دیگر احتیاج به Redux نداشته باشیم. این hook جایگزین Redux یا MobX نیست.

این پست توسط اریک الیوت خواندن خوبی در این زمینه است: Do React Hooks Replace Redux?

اگر این مقاله براتون مفید بوده، اون رو با همکاران و دوستانتون به اشتراک بزارید.همچنین اگر قصد دارید به صورت حرفه ای با react کار کنید، پیشنهاد می کنم دوره آموزش جامع react را مشاهده کنید.

[منبع]

مطالب زیر را حتما مطالعه کنید

9 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

رضا حشمتی گفت:

نوامبر 24, 2022 در 1:16 ق.ظ

سلام، خسته نباشید تعریف خوبی از کارایی useReducer بود ولی فکر نمیکنم برای افراد مبتدی مناسب باشه فقط به جای counterReducer در useReducer باید coursesReducer قرار بگیر چرا که مقدار reducer ما اینجا coursesReducer تعریف شده یا اینکه اسم reducer تعریف شدمون یعنی coursesReducer رو به counterReducer تغییر بدیم تا نام ها هماهنگی داشته باشند.

پاسخ
آرمین گفت:

جولای 31, 2021 در 1:18 ق.ظ

usecontext رو بهتر یاد دادید . به نظرم بهتره یه بازبینی در این آموزش کنید . اصلا کد هاش رو توضبح ندادید که چکار میکنه

پاسخ
- مهدی گفت:
  
  جولای 31, 2021 در 9:22 ق.ظ
  
  کلا درک useReducer مشکل هست و بهتره ترکیبی از context و useReducer رو با مثال واقعی کار کنید تا بهتر درک بشه
  سعی می‌کنیم محتوای مقاله رو بروز کنیم
  
  پاسخ
faezeh گفت:

ژوئن 30, 2021 در 2:00 ب.ظ

خیلی خوب توضیح دادید
مرسی از سایت خوبتون

پاسخ
- علیرضا گفت:
  
  ژوئن 30, 2021 در 5:13 ب.ظ
  
  مرسی فائزه عزیز
  
  پاسخ
مسعود زاهدی گفت:

دسامبر 1, 2020 در 4:09 ب.ظ

ممنون از زحمات شما، اما واقعا گنگ بود
مخصوصا ارجاع های شما به مطالب قبلی

آموزش های زبان اصلی تو یه پاراگراف کل این مطلب رو شرح میدن، ولی نمیدونم چرا تو زبان فارسی هی داریم لقمه رو میچرخونیم.

این جمله رو هرکی بخونه مغزش رگ به رگ میشه: “useReducer اساسا به functional components در React اجازه می دهد تا به reducer functions از state management برنامتون دسترسی داشته باشد.”

در حالیکه یه جمله ساده ست

پاسخ
- مهدی گفت:
  
  دسامبر 1, 2020 در 6:21 ب.ظ
  
  سلام مسعود عزیز
  متاسفانه در مقالات فنی نمیشه بعضی از لغات تخصصی رو ترجمه کرد و باید عین کلمه رو گذاشت
  از طرفی بعضی از کلمات رو میشه ترجمه کرد و اگر ترجمه نکنی که باید عین پاراگراف انگلیسی رو گذاشت.
  در کل زبان انگلیسی برای مقالات تخصصی راحتتر هستند برای خواندن
  
  پاسخ
علی گفت:

آگوست 23, 2020 در 1:18 ق.ظ

بر حسب کنجکاوی امدم ببینم یه سایت ایرانی چطور این موضوع رو تعریف کرده
و به سایت شما بر خوردم ،کلا چه کاری بود خودتون رو انقدر زحمت دادین ! یه خط می نوشتین لطفا به redux مراجعه کنید مثل همونه!
واقعا فاجعه این…

پاسخ
- مهدی گفت:
  
  آگوست 23, 2020 در 8:00 ق.ظ
  
  سلام دوست عزیز.
  تصور کنید که کسی چیزی دردر مورد Redux ندونه.
  اگر بنویسیم به Redux مراجعه کنید.متوجه داستان میشد.
  در کل اینا ها یک سری مقالات هستند که برای کار با context آماده شدند.مقاله بعدی در مورد useContext هست.هدف در اینجا آموزش Redux نبوده .
  برای Redux یک دوره به صورت اختصاصی قرار گرفته که اگر کسی قصد داشت یاد بگیره از این دوره استفاده کنه
  
  پاسخ

آموزش react – کار با useReducer Hook

Reducer چیست؟

useReducer Hook چیست؟

چگونه از useReducer Hook استفاده کنیم؟

آیا هنوز به Redux نیاز داریم؟

مطالب زیر را حتما مطالعه کنید

9 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ

Reducer چیست؟

useReducer Hook چیست؟

چگونه از useReducer Hook استفاده کنیم؟

آیا هنوز به Redux نیاز داریم؟

مطالب زیر را حتما مطالعه کنید

ویژگی ها و قابلیت های جدید react 18

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

نگاه اولیه به React Server Component

React Higher Order Components چیست

5 React Best Practice که باید در سال 2020 یاد بگیرید

Hook های مفیدی که باید در پروژه بعدی React خود از آن استفاده کنید

9 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ