useReducer: El Editor con Deshacer (Undo)

import React, { useReducer } from 'react';

// 1. Define aquí tu estado inicial
const initialState = {
  past: [],
  present: '',
  future: []
};

// 2. Implementa la función reducer
function reducer(state, action) {
  const { past, present, future } = state;

  switch (action.type) {
    case 'SET_TEXT':
      // 💡 Tip: Guarda el present en el past antes de cambiar
      return state; 

    case 'UNDO':
      // 💡 Tip: El nuevo present sale del past
      return state;

    case 'REDO':
      return state;

    default:
      return state;
  }
}

export default function EditorConMemoria() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif', textAlign: 'center' }}>
      <h1>Editor con Historial</h1>
      
      <textarea 
        value={state.present}
        onChange={(e) => dispatch({ type: 'SET_TEXT', payload: e.target.value })}
        rows="5"
        style={{ width: '100%', padding: '10px', fontSize: '1.2rem' }}
      />

      <div style={{ marginTop: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button 
          onClick={() => dispatch({ type: 'UNDO' })}
          disabled={state.past.length === 0}
        >
          ↩️ Deshacer
        </button>
        
        <button 
          onClick={() => dispatch({ type: 'REDO' })}
          disabled={state.future.length === 0}
        >
          ↪️ Rehacer
        </button>
      </div>

      <div style={{ marginTop: '20px', color: '#888', fontSize: '0.9rem' }}>
        <p>Cambios en el historial: {state.past.length}</p>
        <p>Cambios por rehacer: {state.future.length}</p>
      </div>
    </div>
  );
}