[Reaccionar] Cuando a useReducer en lugar de useState

useState es normalmente más sencillo que en un primer momento  useReducer (incluso se puede  poner en práctica  useState usando useReducer ), pero hay un escenario en el que  useReducer es casi seguro que mejor que  useState:

Cuando un elemento de su estado se basa en el valor de un elemento más de su estado con el fin de actualización: useReducer

Más información: Blog de KCD

 

importación Reaccionar de 'reaccionar' 
ReactDOM importación de 'reaccionan-dom' función undoReducer (estado, acción) { 
  const {pasado, presente y futuro} = estado 
  const {type, newPresent} = acción interruptor (tipo) {
     caso 'Deshacer' : {
       si (past.length === 0) retorno estado 
      const anteriores = últimos [past.length - 1 ] 
      const newPast = past.slice (0, past.length - 1 )
       de retorno { 
        pasado: newPast, 
        presente: anterior, 
        futuro : [futuro presente],



  

      } 
    }
     caso 'REDO' : {
       si (future.length === 0) retorno estado 
      const siguiente = futuro [0 ] 
      const newFuture = future.slice (1 )
       de retorno { 
        pasado: [... pasado, presente], 
        presente: A continuación, 
        el futuro: newFuture, 
      } 
    } 
    caso 'SET' : {
       si (newPresent === presente) {
         retorno de estado 
      } 
      retorno { 
        pasado: [... pasado, presente], 
        presente: newPresent, 
        [],: futuro 
      } 
    } 
    caso 'reset' : {
       retorno { 
        pasado: [], 
        presente: newPresent, 
        futuro: [], 
      } 
    } 
    por defecto : {
       lanzar  nuevos error ( `tipo de acción no controlada: $ {type}`) 
    } 
  } 
} 

función useUndo (initialPresent) { 
  const [estado, la expedición] = React.useReducer (undoReducer, { 
    pasado: [], 
    presente: initialPresent, 
    futuro: [], 
  }) 

  const canUndo ! = state.past.length == 0 
  const canRedo! = State.future.length == 0 
 
  const deshacer= React.useCallback (() => { 
    despacho ({type: 'Deshacer' }) 
  }, []) 

  const rehacer = React.useCallback (() => { 
    despacho ({ escribir: 'REDO' }) 
  }, []) 

  const conjunto = React.useCallback (newPresent => { 
    expedición ({type: 'sET' , newPresent}) 
  }, []) 

  const reinicio = React.useCallback (newPresent => { 
    expedición ({type: 'reset' , newPresent}) 
  }, []) 

  de retorno [{set reset, deshacer, rehacer, canUndo, canRedo,} estado,] 
} 

la función App () {
  const [estado, {SET}] = useUndo ( 'primer' ) 

  React.useEffect (() => { 
    set ( 'segundo' ) 
  }, [set]) 

  React.useEffect (() => { 
    set ( 'tercer' ) 
  }, [set]) 

  de retorno <pre> {JSON.stringify (estado, nulo , 2)} </ pre>
 } 

ReactDOM.render ( <App />, document.getElementById ( 'root'))