simple-reduce.jsx

type CounterState = { count: number };

const initialState = {
  count: 0,
};

function Counter() {
  const [state, actions, queue, error] = useSimpleReducer(
    // initial state
    initialState,
    // collection of reducer methods
    {
      async add(state: CounterState, amount: number) {
        // An api call to update the count state on the server
        await updateCounterOnServer(state.count + amount);
        return { ...state, count: state.count + amount };
      },
    }
  );
  return (
    <div>
      <button onClick={() => actions.add(2)}>Add</button>
      <div>
        <p>Steps: {state.count}</p>
        <div>{queue.isActive ? <Loader /> : "Processing completed"}</div>
        {error && <p>{error.reason}</p>}
      </div>
    </div>
  );
}