useReducer Hook in React

What is useReducer?

useReducer is a hook that is designed for handling more complex state management scenarios. It’s especially useful when state changes involve multiple sub-values or when state transitions depend on various actions. The useReducer hook works by taking a reducer function and an initial state as arguments, and it returns the current state and a dispatch function.

• state: The current state.
• dispatch: A function that you use to send actions to the reducer.
• reducer: A function that determines how the state should change based on the action.
• initialState: The initial state value.

Advantages of useReducer

• Centralized Logic: The state transition logic is centralized in the reducer function, making it easier to manage and understand.
• Scalability: As your application grows, adding new state transitions is straightforward by extending the reducer function.
• Predictability: The reducer function is pure, meaning it always returns the same output given the same input. This makes your state transitions predictable and easy to test.

import React, { useReducer } from 'react';


const initialState = { count: 0 };


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


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


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

• reducer: The reducer function defines how the state should change based on different actions (increment, decrement, reset).
• dispatch: The dispatch function is used to send actions to the reducer, which then updates the state accordingly.

Conclusion

The useReducer hook is an excellent tool for managing complex state logic in React applications. It provides a structured approach that scales well as your application grows.