React · State Management

Understanding State Reducers

Master the reducer pattern for predictable state management in React components

Find videos you like?

Save to resource drawer for future reference!

What is a Reducer?

The core concept behind predictable state updates

A reducer is a pure function that takes the current state and an action, then returns the next state. Think of it as a state update machine that follows strict, predictable rules.

The Reducer Pattern

function reducer(state, action) {

return nextState;

}

Current State

The existing state before any changes

Action

An object describing what happened

Next State

The new state after applying the action

Key Principle

Reducers are pure functions - they always return the same output for the same input and never modify the original state.

When to Use Reducers

Recognize the patterns that call for a reducer

Not all state needs a reducer! Use them when your state logic becomes complex and hard to manage with multiple useState calls.

✅ Use Reducers When:

State updates depend on previous state
Multiple state values change together
Complex state logic in event handlers
Different actions modify state differently

❌ Stick with useState When:

Simple independent state values
State updates are straightforward
No complex update logic needed
State values don't affect each other

The useReducer Hook

How to implement reducers in React components

The useReducer hook is React's built-in way to use reducers in your components. It returns the current state and a dispatch function.

useReducer Syntax

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

state

The current state value (like useState)

dispatch

Function to send actions to the reducer

Complete Example

function reducer(state, action) {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

default:

return state;

}

function Counter() {

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

return (

<button onClick={() => dispatch({ type: 'INCREMENT' })}>

</button>

);

}

Interactive Playground: Counter with Reducer

See how reducers handle simple state updates

Counter with useReducer

A simple counter showing basic reducer concepts

Frontend

function Counter() {
  const initialState = { count: 0 };

  function counterReducer(state = initialState, action) {
    switch (action.type) {
      case 'INCREMENT':
        return { count: (state?.count || 0) + 1 };
      case 'DECREMENT':
        return { count: (state?.count || 0) - 1 };
      case 'RESET':
        return { count: 0 };
      case 'SET_VALUE':
        return { count: Math.max(0, action.payload) };
      default:
        return state || initialState;
    }
  }

  const [state, dispatch] = React.useReducer(counterReducer, initialState);

  return (
    <div className="container">
      <h1>🔢 Counter with Reducer</h1>
      
      <div className="counter-display">
        <div className="count-value">{state?.count || 0}</div>
        <div className="count-label">Current Count</div>
      </div>

      <div className="button-grid">
        <button 
          onClick={() => dispatch({ type: 'INCREMENT' })}
          className="btn btn-primary"
        >
          ➕ Increment
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'DECREMENT' })}
          className="btn btn-secondary"
        >
          ➖ Decrement
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'RESET' })}
          className="btn btn-danger"
        >
          🔄 Reset
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'SET_VALUE', payload: 10 })}
          className="btn btn-info"
        >
          ⚡ Set to 10
        </button>
      </div>

      <div className="action-log">
        <h3>📋 Action Log</h3>
        <div className="log-content">
          <div className="log-entry">
            <strong>Current State:</strong> {JSON.stringify(state)}
          </div>
          <div className="log-entry">
            <strong>Try this:</strong> Click buttons to see how actions update state
          </div>
        </div>
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Interactive Playground: Todo List

Complex state management with multiple actions

Todo List with useReducer

Manage todos with add, toggle, and delete actions

Frontend

function TodoList() {
  const [state, dispatch] = React.useReducer(todoReducer, initialState);

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

  const initialState = {
    todos: [
      { id: 1, text: 'Learn reducers', completed: true },
      { id: 2, text: 'Build todo app', completed: false }
    ]
  };

  const [inputValue, setInputValue] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      dispatch({ type: 'ADD_TODO', payload: inputValue.trim() });
      setInputValue('');
    }
  };

  const completedCount = state.todos.filter(todo => todo.completed).length;
  const totalCount = state.todos.length;

  return (
    <div className="container">
      <h1>📝 Todo List with Reducer</h1>
      
      <div className="stats">
        <div className="stat">
          <span className="stat-number">{totalCount}</span>
          <span className="stat-label">Total</span>
        </div>
        <div className="stat">
          <span className="stat-number">{completedCount}</span>
          <span className="stat-label">Done</span>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="add-todo">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="What needs to be done?"
          className="todo-input"
        />
        <button type="submit" className="add-btn">
          ➕ Add Todo
        </button>
      </form>

      <div className="todo-list">
        {state.todos.length === 0 ? (
          <div className="empty-state">
            🎉 No todos! Add one above.
          </div>
        ) : (
          state.todos.map(todo => (
            <div key={todo.id} className={'todo-item ' + (todo.completed ? 'completed' : '')}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}
                className="todo-checkbox"
              />
              <span className="todo-text">{todo.text}</span>
              <button 
                onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}
                className="delete-btn"
              >
                🗑️
              </button>
            </div>
          ))
        )}
      </div>

      {completedCount > 0 && (
        <button 
          onClick={() => dispatch({ type: 'CLEAR_COMPLETED' })}
          className="clear-btn"
        >
          🧹 Clear Completed
        </button>
      )}

      <div className="state-display">
        <h3>🔍 Current State</h3>
        <pre>{JSON.stringify(state, null, 2)}</pre>
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<TodoList />);

Live Preview

Loading preview...

Reducer Best Practices

Write clean, maintainable reducers

✅ Do This

Keep reducers pure and predictable
Use descriptive action types
Always return new state objects
Handle unknown actions gracefully
Group related state in one reducer

❌ Avoid This

Mutating the original state
Side effects in reducers
Async operations in reducers
Random or time-based logic
Nested reducers for simple state

Pro Tip

Start with useState and migrate to useReducer only when you notice your state logic becoming complex. Don't over-engineer simple components!

Key Takeaways

Essential concepts about state reducers

Pure Functions

Reducers are pure functions that always return the same output for the same input.

Immutable Updates

Always return new state objects instead of modifying the existing state.

Action-Driven

State changes happen through dispatching actions with clear types and payloads.

Predictable Flow

Reducers make state changes predictable and easier to debug in complex components.

Remember

State reducers are a powerful pattern for managing complex state logic. They make your components more predictable, testable, and easier to maintain as your application grows.

Previous Topic

State Updates Queue

Understand how React queues state updates, use updater functions, and avoid common pitfalls.

Next Topic

State Structure

Learn principles for effective state structure: normalization, avoiding redundancy, and organizing state.

Ask a Question

Have a question about State Reducers? Ask our AI assistant.

🔐 Login to use AI Assistant

React · State Management

Understanding State Reducers

Master the reducer pattern for predictable state management in React components

Find videos you like?

Save to resource drawer for future reference!

What is a Reducer?

The core concept behind predictable state updates

A reducer is a pure function that takes the current state and an action, then returns the next state. Think of it as a state update machine that follows strict, predictable rules.

The Reducer Pattern

function reducer(state, action) {

return nextState;

}

Current State

The existing state before any changes

Action

An object describing what happened

Next State

The new state after applying the action

Key Principle

Reducers are pure functions - they always return the same output for the same input and never modify the original state.

When to Use Reducers

Recognize the patterns that call for a reducer

Not all state needs a reducer! Use them when your state logic becomes complex and hard to manage with multiple useState calls.

✅ Use Reducers When:

State updates depend on previous state
Multiple state values change together
Complex state logic in event handlers
Different actions modify state differently

❌ Stick with useState When:

Simple independent state values
State updates are straightforward
No complex update logic needed
State values don't affect each other

The useReducer Hook

How to implement reducers in React components

The useReducer hook is React's built-in way to use reducers in your components. It returns the current state and a dispatch function.

useReducer Syntax

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

state

The current state value (like useState)

dispatch

Function to send actions to the reducer

Complete Example

function reducer(state, action) {

switch (action.type) {

case 'INCREMENT':

return { count: state.count + 1 };

case 'DECREMENT':

return { count: state.count - 1 };

default:

return state;

}

function Counter() {

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

return (

<button onClick={() => dispatch({ type: 'INCREMENT' })}>

</button>

);

}

Interactive Playground: Counter with Reducer

See how reducers handle simple state updates

Counter with useReducer

A simple counter showing basic reducer concepts

Frontend

function Counter() {
  const initialState = { count: 0 };

  function counterReducer(state = initialState, action) {
    switch (action.type) {
      case 'INCREMENT':
        return { count: (state?.count || 0) + 1 };
      case 'DECREMENT':
        return { count: (state?.count || 0) - 1 };
      case 'RESET':
        return { count: 0 };
      case 'SET_VALUE':
        return { count: Math.max(0, action.payload) };
      default:
        return state || initialState;
    }
  }

  const [state, dispatch] = React.useReducer(counterReducer, initialState);

  return (
    <div className="container">
      <h1>🔢 Counter with Reducer</h1>
      
      <div className="counter-display">
        <div className="count-value">{state?.count || 0}</div>
        <div className="count-label">Current Count</div>
      </div>

      <div className="button-grid">
        <button 
          onClick={() => dispatch({ type: 'INCREMENT' })}
          className="btn btn-primary"
        >
          ➕ Increment
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'DECREMENT' })}
          className="btn btn-secondary"
        >
          ➖ Decrement
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'RESET' })}
          className="btn btn-danger"
        >
          🔄 Reset
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'SET_VALUE', payload: 10 })}
          className="btn btn-info"
        >
          ⚡ Set to 10
        </button>
      </div>

      <div className="action-log">
        <h3>📋 Action Log</h3>
        <div className="log-content">
          <div className="log-entry">
            <strong>Current State:</strong> {JSON.stringify(state)}
          </div>
          <div className="log-entry">
            <strong>Try this:</strong> Click buttons to see how actions update state
          </div>
        </div>
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<Counter />);

Live Preview

Loading preview...

Interactive Playground: Todo List

Complex state management with multiple actions

Todo List with useReducer

Manage todos with add, toggle, and delete actions

Frontend

function TodoList() {
  const [state, dispatch] = React.useReducer(todoReducer, initialState);

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

  const initialState = {
    todos: [
      { id: 1, text: 'Learn reducers', completed: true },
      { id: 2, text: 'Build todo app', completed: false }
    ]
  };

  const [inputValue, setInputValue] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim()) {
      dispatch({ type: 'ADD_TODO', payload: inputValue.trim() });
      setInputValue('');
    }
  };

  const completedCount = state.todos.filter(todo => todo.completed).length;
  const totalCount = state.todos.length;

  return (
    <div className="container">
      <h1>📝 Todo List with Reducer</h1>
      
      <div className="stats">
        <div className="stat">
          <span className="stat-number">{totalCount}</span>
          <span className="stat-label">Total</span>
        </div>
        <div className="stat">
          <span className="stat-number">{completedCount}</span>
          <span className="stat-label">Done</span>
        </div>
      </div>

      <form onSubmit={handleSubmit} className="add-todo">
        <input
          type="text"
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
          placeholder="What needs to be done?"
          className="todo-input"
        />
        <button type="submit" className="add-btn">
          ➕ Add Todo
        </button>
      </form>

      <div className="todo-list">
        {state.todos.length === 0 ? (
          <div className="empty-state">
            🎉 No todos! Add one above.
          </div>
        ) : (
          state.todos.map(todo => (
            <div key={todo.id} className={'todo-item ' + (todo.completed ? 'completed' : '')}>
              <input
                type="checkbox"
                checked={todo.completed}
                onChange={() => dispatch({ type: 'TOGGLE_TODO', payload: todo.id })}
                className="todo-checkbox"
              />
              <span className="todo-text">{todo.text}</span>
              <button 
                onClick={() => dispatch({ type: 'DELETE_TODO', payload: todo.id })}
                className="delete-btn"
              >
                🗑️
              </button>
            </div>
          ))
        )}
      </div>

      {completedCount > 0 && (
        <button 
          onClick={() => dispatch({ type: 'CLEAR_COMPLETED' })}
          className="clear-btn"
        >
          🧹 Clear Completed
        </button>
      )}

      <div className="state-display">
        <h3>🔍 Current State</h3>
        <pre>{JSON.stringify(state, null, 2)}</pre>
      </div>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(<TodoList />);

Live Preview

Loading preview...

Reducer Best Practices

Write clean, maintainable reducers

✅ Do This

Keep reducers pure and predictable
Use descriptive action types
Always return new state objects
Handle unknown actions gracefully
Group related state in one reducer

❌ Avoid This

Mutating the original state
Side effects in reducers
Async operations in reducers
Random or time-based logic
Nested reducers for simple state

Pro Tip

Start with useState and migrate to useReducer only when you notice your state logic becoming complex. Don't over-engineer simple components!

Key Takeaways

Essential concepts about state reducers

Pure Functions

Reducers are pure functions that always return the same output for the same input.

Immutable Updates

Always return new state objects instead of modifying the existing state.

Action-Driven

State changes happen through dispatching actions with clear types and payloads.

Predictable Flow

Reducers make state changes predictable and easier to debug in complex components.

Remember

State reducers are a powerful pattern for managing complex state logic. They make your components more predictable, testable, and easier to maintain as your application grows.

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

State Updates Queue

State Structure

Building Your Learning Module...

Understanding State Reducers

The Reducer Pattern

Current State

Action

Next State

Key Principle

✅ Use Reducers When:

❌ Stick with useState When:

useReducer Syntax

state

dispatch

Complete Example

Counter with useReducer

Todo List with useReducer

✅ Do This

❌ Avoid This

Pro Tip

Pure Functions

Immutable Updates

Action-Driven

Predictable Flow

Remember

State Updates Queue

State Structure

Understanding State Reducers

The Reducer Pattern

Current State

Action

Next State

Key Principle

✅ Use Reducers When:

❌ Stick with useState When:

useReducer Syntax

state

dispatch

Complete Example

Counter with useReducer

Todo List with useReducer

✅ Do This

❌ Avoid This

Pro Tip

Pure Functions

Immutable Updates

Action-Driven

Predictable Flow

Remember