What is state reducer pattern?

The State Reducer Pattern in React is an advanced pattern that leverages the `useReducer` hook to allow consumers of a component or hook to customize its internal state management logic. It promotes flexibility and extensibility by externalizing state transition rules, making components more adaptable to different application requirements.

What is the State Reducer Pattern?

At its core, the State Reducer Pattern involves passing a reducer function as a prop or argument to a component or custom hook. This external reducer can then augment or completely replace the internal state logic, allowing consumers to influence how the component's state changes in response to actions.

It builds upon the principles of the useReducer hook, which provides a way to manage complex state logic with a pure reducer function. The pattern extends this by making the reducer itself configurable by the consumer.

Why Use the State Reducer Pattern?

• Flexibility and Extensibility: Allows consumers to customize state behavior without forking or modifying the original component/hook.
• Separation of Concerns: Keeps state logic separate from UI rendering logic, making components cleaner and easier to understand.
• Reusability: Enables a single component or hook to be used in various scenarios by simply providing different reducer functions.
• Testability: Reducer functions are pure and easy to test in isolation.
• Predictable State Changes: Promotes a functional approach to state updates, leading to more predictable behavior.

How it Works (Conceptual)

Imagine you have a reusable useCounter hook. By default, it might only allow incrementing and decrementing. If a consumer needs to add a 'reset' action or prevent incrementing beyond a certain limit, the State Reducer Pattern allows them to pass their own reducer that handles these specific needs, without the useCounter hook itself needing to be aware of them.

The pattern typically involves a component or hook that manages its internal state using useReducer and accepts an optional reducer prop (or argument). This passed-in reducer is then either used directly or composed with the component's default reducer.

Example Implementation

Basic `useCounter` Hook without State Reducer Pattern

function counterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

function useCounter(initialCount = 0) {
  const [state, dispatch] = React.useReducer(counterReducer, { count: initialCount });
  return { count: state.count, increment: () => dispatch({ type: 'increment' }), decrement: () => dispatch({ type: 'decrement' }) };
}

Implementing the State Reducer Pattern with `useCounter`

To enable the State Reducer Pattern, we modify useCounter to accept a custom reducer. This custom reducer can either extend or completely override the default behavior.

// Default reducer for the useCounter hook
function defaultCounterReducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

// useCounter hook accepting a custom reducer
function useCounter(initialCount = 0, customReducer) {
  const reducer = customReducer ? (state, action) => {
    // First, try the custom reducer
    const customResult = customReducer(state, action);
    // If custom reducer handled it, return its result. Otherwise, use default.
    if (customResult !== state) { // Simple check if state changed
      return customResult;
    }
    return defaultCounterReducer(state, action);
  } : defaultCounterReducer;

  const [state, dispatch] = React.useReducer(reducer, { count: initialCount });

  return {
    count: state.count,
    increment: () => dispatch({ type: 'increment' }),
    decrement: () => dispatch({ type: 'decrement' }),
    dispatch // Expose dispatch for custom actions
  };
}

Using the `useCounter` Hook with a Custom Reducer

Now, a consumer can add new actions or modify existing ones without changing useCounter itself.

function App() {
  // Custom reducer to add a 'reset' action and a max limit for increment
  const myCustomReducer = (state, action) => {
    if (action.type === 'reset') {
      return { count: 0 };
    }
    if (action.type === 'increment' && state.count >= 5) {
      return state; // Prevent increment beyond 5
    }
    return state; // Pass unhandled actions to the default reducer
  };

  const { count, increment, decrement, dispatch } = useCounter(0, myCustomReducer);

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

Key Benefits of this Pattern

This pattern allows the useCounter hook to remain simple and focused on its core logic, while granting consumers powerful control over its state transitions. The custom reducer acts as a 'middleware' or 'plugin' for the state, enabling specific application-level requirements to be met without modifying the shared component/hook logic.

When to Use It

• When building reusable UI components or custom hooks that manage complex state and you anticipate consumers needing to customize its behavior.
• For libraries or design systems where components need to be highly flexible and adaptable.
• When dealing with components whose internal state logic might need to be overridden or extended for specific application scenarios.
• To abstract away internal state details while providing a controlled way for consumers to interact with and modify state.