ReactJs UseReducer Hook

---

Introduction

useReducer is one of the React hooks that helps in changing the state of the component. In React, the state is used as an internal data storage that keeps track of changes during the lifetime of the component. The useReducer hook is a more sophisticated way of managing the component's state when it is more complex than a single value or key-value pair.

Syntax

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

Example

import React, { useReducer } from 'react';

const initialState = {
  count: 0
};

const reducer = (state, action) => {
  switch(action.type) {
    case 'increment':
        return { count: state.count + 1 };
    case 'decrement':
        return { count: state.count - 1 };
    default:
      throw new Error();
  }
};

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

  return (
    <>
      Count: { state.count }
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </>
  );
};

export default Count;

Output

The above example will display the count and two buttons for incrementing and decrementing the count. When we click on the button, the count will be updated accordingly.

Explanation

useReducer hook is used for managing the state of an application. It is a function that takes two parameters: a reducer function and an initial state. A reducer function is a pure function that accepts two arguments and returns a new state based on the action type.

The reducer function accepts two parameters: the current state and the action object. The action object contains at least the type property, which is a string that describes the type of action. In the reducer function, we use a switch case statement to check the action type and return a new state based on the action.

The useReducer hook returns an array with two elements: the first element is the current state, and the second element is the dispatch function. The dispatch function is used to send an action to the reducer function, which updates the state based on the action.

Use

The useReducer hook is used when the state is more complex than a single value or key-value pair. It is commonly used for managing global state, and it is recommended to use it with useContext for sharing state across components.

Important Points

• The reducer function must be a pure function.
• The dispatch function is used to send an action to the reducer function, which updates the state based on the action.
• The initialState argument is the initial state of the component.

Summary

In this tutorial, we learned about the useReducer hook in React. We saw the syntax, example, output, explanation, use, and important points of this hook. We also learned that it is used when the state is more complex than a single value or key-value pair and commonly used for managing global state in the application.