useReducer for dummies(kid friendly)

Imagine that you are in charge of keeping track of the snacks in your house. You have a bunch of different snacks that you like to eat, and you want to be able to keep track of how many of each snack you have left.

To do this, you could use a react reducer. Here's how it might work:

The react reducer is a special function that helps you keep track of your snacks. It takes in two things: the current state of your snacks (i.e. the number of each snack you have left), and an action (e.g. "eat a snack" or "buy more snacks").

1. When you want to eat a snack, you dispatch an action to the reducer that tells it what snack you want to eat. The reducer then checks to see if you have any of that snack left. If you do, it returns a new state that has one fewer of that snack (so you now have one fewer of that snack). If you don't have any of that snack left, it returns the current state without any changes.

2. When you want to buy more snacks, you dispatch an action to the reducer that tells it what snack you want to buy more of. The reducer then adds more of that snack to your supply and returns a new state that includes the additional snacks.

This way, you can use the react reducer to keep track of your snacks and make sure you always have enough to eat. You can use the actions to tell the reducer what to do (e.g. eat a snack, buy more snacks, etc.), and the reducer will take care of updating your snack supply and returning a new state based on the actions you dispatch to it.

QUICK CATCHUP SUMMARY
--WHEN WE EAT A SNACK, THE SNACK COUNT WILL REDUCE, WHEN WE BUY A SNACK, THE SNACK COUNT WILL INCREASE

Code example:

const snackReducer = (state, action) => {
  switch (action.type) {
    case 'EAT_SNACK':
      const newState = { ...state }; // create a copy of the current state
      newState[action.snack]--; // decrease the count of the specified snack by 1
      return newState;
    case 'BUY_SNACKS':
      const newState = { ...state }; // create a copy of the current state
      newState[action.snack] += action.count; // increase the count of the specified snack by the specified count
      return newState;
    default:
      return state;
  }
}

To use this reducer, you would need to initialize the state with the initial counts of each snack that you have. For example:

const initialState = {
  chips: 10,
  cookies: 5,
  crackers: 20
}

Then, you can dispatch actions to the reducer using the dispatch function, like this:

dispatch({ type: 'EAT_SNACK', snack: 'chips' });
dispatch({ type: 'BUY_SNACKS', snack: 'cookies', count: 10 });

This should give you a basic understanding of how you can use a react reducer to keep track of your snack supply!