How to fix useReducer: the reducer function did not return a valid new state in React

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    case 'decrement':
      return { ...state, count: state.count - 1 };
    default:
      // Option 1: Return current state (silently ignore unknown actions)
      // return state;
      
      // Option 2: Throw error during development
      throw new Error(`Unknown action type: ${action.type}`);
  }
}

// WRONG - missing return after mutation
function badReducer(state, action) {
  switch (action.type) {
    case 'update':
      state.value = action.payload; // Mutation!
      break; // Should be return { ...state, value: action.payload };
    case 'reset':
      return initialState;
  }
  // No return here - ERROR!
}

// CORRECT - every case returns
function goodReducer(state, action) {
  switch (action.type) {
    case 'update':
      return { ...state, value: action.payload };
    case 'reset':
      return initialState;
    default:
      return state;
  }
}

{
  "compilerOptions": {
    "strict": true,
    "noImplicitReturns": true
  }
}

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { ...state, count: state.count + 1 };
    // TypeScript error: Not all code paths return a value
  }
}

// Hard to track - if/else
function ifElseReducer(state, action) {
  if (action.type === 'add') {
    return { ...state, items: [...state.items, action.item] };
  } else if (action.type === 'remove') {
    return { ...state, items: state.items.filter(i => i.id !== action.id) };
  } // Missing else clause!
}

// Clearer - switch statement
function switchReducer(state, action) {
  switch (action.type) {
    case 'add':
      return { ...state, items: [...state.items, action.item] };
    case 'remove':
      return { ...state, items: state.items.filter(i => i.id !== action.id) };
    default:
      return state;
  }
}

import { describe, it, expect } from 'vitest';
import reducer from './reducer';

describe('reducer', () => {
  const initialState = { count: 0 };
  
  it('handles increment action', () => {
    const result = reducer(initialState, { type: 'increment' });
    expect(result).toEqual({ count: 1 });
  });
  
  it('handles decrement action', () => {
    const result = reducer(initialState, { type: 'decrement' });
    expect(result).toEqual({ count: -1 });
  });
  
  it('returns current state for unknown actions', () => {
    const result = reducer(initialState, { type: 'unknown' });
    expect(result).toBe(initialState);
  });
});

function updateUser(state, action) {
  return {
    ...state,
    users: state.users.map(user => 
      user.id === action.id ? { ...user, ...action.updates } : user
    )
  };
}

function addUser(state, action) {
  return {
    ...state,
    users: [...state.users, action.user]
  };
}

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_USER':
      return updateUser(state, action);
    case 'ADD_USER':
      return addUser(state, action);
    case 'DELETE_USER':
      return deleteUser(state, action);
    default:
      return state;
  }
}