Previous

React useReducer Hook

  • useReducer is a React hook that allows more complex state logic by using a reducer function to manage state changes.

Purpose

  • Well-suited for managing state logic that involves multiple sub-values or when the next state depends on the previous one.
  • Works well when the state logic is more complex than what can be achieved with useState.

Syntax

  • Import useReducer from the 'react' library.
  • Define a reducer function that takes the current state and an action and returns the new state.
  • Use useReducer with the reducer function and an initial state.
import React, { useReducer } from 'react';

const initialState = /* initial state value */;
const reducer = (state, action) => {
  switch (action.type) {
    case 'ACTION_TYPE':
      return /* new state value */;
    // handle other action types...
    default:
      return state;
  }
};

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

Counter

  • Use useReducer to implement a simple counter.
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:
      return state;
  }
};

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

  return (
    <div>
      <h2>Example: Counter</h2>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
};

Todos

  • Use useReducer for managing a list of todos.
import React, { useReducer, useState } from 'react';

const initialState = [];

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case 'TOGGLE_TODO':
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};

const Todos = () => {
  const [todos, dispatch] = useReducer(reducer, initialState);
  const [newTodo, setNewTodo] = useState('');

  const addTodo = () => {
    if (newTodo.trim() !== '') {
      dispatch({ type: 'ADD_TODO', payload: newTodo });
      setNewTodo('');
    }
  };

  return (
    <div>
      <h2>Example: Todos</h2>
      <ul>
        {todos.map(todo => (
          <li key={todo.id} onClick={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}>
            {todo.completed ? <s>{todo.text}</s> : todo.text}
          </li>
        ))}
      </ul>
      <input type="text" value={newTodo} onChange={e => setNewTodo(e.target.value)} />
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
};

 

Summary

useReducer is beneficial when dealing with more complex state management in React applications. It provides a structured way to handle state changes, especially when the logic involves multiple actions and sub-values within the state.

Previous