ReactJS useReducer Hook

Опубликовано: 23 Декабря, 2021

Перехватчик useReducer является лучшей альтернативой перехватчику useState и обычно более предпочтителен, чем перехватчик useState, когда у вас сложная логика построения состояния, или когда следующее значение состояния зависит от его предыдущего значения или когда необходимо оптимизировать компоненты.

Хук useReducer принимает три аргумента, включая редуктор, начальное состояние и функцию для ленивой загрузки начального состояния.

Синтаксис:

 const [состояние, отправка] = useReducer (редуктор, initialArgs, init);

Пример: Здесь reducer - это определяемая пользователем функция, которая связывает текущее состояние с методом диспетчеризации для обработки состояния, initialAres относится к начальным аргументам, а init - это функция для ленивой инициализации состояния.

App.js: Программа для демонстрации использования хука useReducer:

Javascript

import React, { useReducer } from "react";
  
// Defining the initial state and the reducer
const initialState = 0;
const reducer = (state, action) => {
  switch (action) {
    case "add":
      return state + 1;
    case "subtract":
      return state - 1;
    case "reset":
      return 0;
    default:
      throw new Error("Unexpected action");
  }
};
  
const App = () => {
    // Initialising useReducer hook
  const [count, dispatch] = useReducer(reducer, initialState);
  return (
    <div>
      <h2>{count}</h2>
      <button onClick={() => dispatch("add")}>
        add
      </button>
      <button onClick={() => dispatch("subtract")}>
        subtract
      </button>
      <button onClick={() => dispatch("reset")}>
        reset
      </button>
    </div>
  );
};
  
export default App;

Выход:

React-js

ReactJS useReducer Hook

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ