Gestire gli state in React con useReducer

useReducer è un hooke di React che ci consente di gestire gli state alternativo ad useState.

Diciamo che la differenza principale è che con useReducer possiamo applicare una logica più complessa.

Quindi non è una valida alternativa in alcuni casi.

Qui sotto un esempio di come usarlo:

import React, { useReducer } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const initCount = { count: 1 };

  const red = (state, action) => {
    switch (action.type) {
      case 'ADD':
        return { count: state.count + 1 };
      case 'MIN':
        return { count: state.count - 1 };
      default:
        return state;
    }
  };

  const [state, dispatch] = useReducer(red, initCount);

  return (
    <>
      <p>{state.count}</p>
      <button onClick={() => dispatch({ type: 'ADD' })}>AGGIUNGI</button>
      <button onClick={() => dispatch({ type: 'MIN' })}>SOTTRAI</button>
    </>
  );
}

export default App;

Per far funzionare l'esempio ho anche dovuto impostare strict a false nel tsconfig.json:

"strict": false,

Enjoy!