Local complex state in React

with-reducer-function.js

// Instead of this:
// const [settingA, setSettingA] = useState(false);
// const [inputB, setInputB] = useState('');
// ... 23 more states

// You use this initial state for useReducer:
const complexInitialState = {
  settingA: false,
  inputB: '',
  theme: 'dark',
  // ... all other properties here
};

function complexReducer(state, action) {
  switch (action.type) {
    case 'TOGGLE_SETTING_A':
      return { ...state, settingA: !state.settingA };
    case 'UPDATE_INPUT_B':
      return { ...state, inputB: action.payload };
    // ... all other actions here
    default:
      return state;
  }
}

// In your component:
function ComplexComponent() {
  const [state, dispatch] = useReducer(complexReducer, complexInitialState);

  // Use the single state object and dispatch actions
  return (
    <div>
      <input 
        value={state.inputB} 
        onChange={(e) => dispatch({ type: 'UPDATE_INPUT_B', payload: e.target.value })} 
      />
      <button onClick={() => dispatch({ type: 'TOGGLE_SETTING_A' })}>
        Toggle A: {state.settingA ? 'ON' : 'OFF'}
      </button>
      {/* ... render all other parts of state */}
    </div>
  );
}

without-reducer.js

import React, { useState } from 'react';

const initialState = {
  user: {
    name: 'Jane Doe',
    age: 30,
    address: {
      city: 'Anytown',
    },
  },
  settings: {
    theme: 'light',
  },
};

function ProfileManager() {
  // Use useState, not useReducer
  const [state, setState] = useState(initialState);

  // The 'dispatch' mechanism is now handled via functional updates to setState
  
  const updateName = (newName) => {
    setState(prevState => ({
      ...prevState,
      user: { ...prevState.user, name: newName },
    }));
  };

  const updateCity = (newCity) => {
    setState(prevState => ({
      ...prevState,
      user: {
        ...prevState.user,
        address: { ...prevState.user.address, city: newCity },
      },
    }));
  };

  const toggleTheme = () => {
    setState(prevState => ({
      ...prevState,
      settings: {
        ...prevState.settings,
        theme: prevState.settings.theme === 'light' ? 'dark' : 'light',
      },
    }));
  };

  // Event Handlers
  const handleNameChange = (e) => updateName(e.target.value);
  const handleCityChange = (e) => updateCity(e.target.value);

  return (
    <div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '5px' }}>
      <h1>User Profile Manager</h1>
      <button onClick={toggleTheme}>Toggle Theme</button>

      <div style={{ marginTop: '20px' }}>
        <p>Name: {state.user.name}</p>
        <p>City: {state.user.address.city}</p>
      </div>

      <div style={{ marginTop: '20px' }}>
        <label>
          Update Name:
          <input type="text" value={state.user.name} onChange={handleNameChange} />
        </label>
        <br />
        <label>
          Update City:
          <input type="text" value={state.user.address.city} onChange={handleCityChange} />
        </label>
      </div>

      {/* <pre>{JSON.stringify(state, null, 2)}</pre> */}
    </div>
  );
}

export default ProfileManager;