React Advanced State

All state management in this application makes heavy use of React’s useState Hook. More sophisticated state management gives you React’s useReducer Hook, though. Since the concept of reducers in JavaScript splits the community in half, we won’t cover it extensively here, but the exercises at the end of this section should give you plenty of practice.

We’ll move the stories state management from the useState hook to a new useReducer hook. First, introduce a reducer function outside of your components. A reducer function always receives state and action. Based on these two arguments, a reducer always returns a new state: