A useReducer Guide: How to Add Interactivity With React Context

[00:00 - 00:04] Add global state and business logic using the use reducer. Soon we'll begin to add interactivity to our application.

[00:05 - 00:23] We will begin implementing drag and drop and we'll use reactdnd library and we 'll use state management. We won't use an external framework like Redux or mobex instead we 'll throw together a poor man's version of Redux using the use reducer hook and react context dpi. Before we jump into the action I will give a little primer on using use reducer .

[00:24 - 01:20] Use reducer is a react hook that allows us to manage complex state-like objects with multiple fields. The main idea is that instead of mutating the original object we always create a new instance with desired values. So when used in react, react calls an action creator usually as a reaction on something that user does with the interface. For example clicks on a button and then we call an action creator that returns an action. We send it to a reducer using dispatch method. The reducer generates a new state using the old state value and the action that we send to it and then sends the new value to react and then the cycle repeats. What is a reducer? A reducer is a function that calculates a new state by combining an old state with an action object. So here for example we had a state that is an object with field name and the value thread. We receive a new action. This means that we will call our reducer. It will happen implicitly under the hood of user reducer or if you use the Redux then it will be happening inside of the Redux internals.

[01:21 - 03:14] But in the end we will just call this reducer function. The action will contain two fields. It is always required to contain the type field that contains the type or name of the action. In our case it's set name and the payload. In our case the payload is the name field that contains the new name for the state and then the reducer returns a new object where name has the value of action name field and we get a new state. Usually a reducer looks like this. It's a function. It must be a pure function so we cannot perform any side effects inside of the reducer. It receives a state that 's going to be the old state and the action. We often the switch statement is used and it checks the action type and depending on the value of action type field it returns different kinds of new state objects. Here we get a new object with all the fields and values of the old state and then we override the updated field with action payload. If we cannot recognize the actions we return state without changing it. How to use use reducer. You can call the use reducer hook inside of your functional components. On every state change your component will be re-rendered. The basic syntax is the following. You call use reducer pass in the reducer that will process the state for you and the object representing the initial state. In return you will receive the state that is going to be observable and it will cause component re-enders and the dispatch function. The dispatch function is going to be used to send actions to the reducer. What are actions? Actions are special objects that are passed to the reducer function to calculate the new state. Actions must contain the type field and often they also contain some field for the payload. The type field is mandatory and some actions don't even have any payload at all. To send the actions to the reducer we use the dispatch method that we get from the use reducer hook. Usually instead of creating the actions directly we generate them using special functions called action creators. Here's example of one. It is a function that receives some arguments.

[03:15 - 03:29] Usually they will end up in the payload. Here we accept the name as an argument and then pass it to the action object. After you have the action creator you can use it to dispatch actions like this. Instead of passing an object you call the action creator and pass the result to dispatch method.

[03:30 - 04:30] Let's look at the counter example. The code for the counter example is in the code 01 first up use reducer folder. Open up tss and here you should see the counter reducer. The reducer can process increment and decrement actions. This is TypeScript so we must provide the types for the state and the action. State is going to be an object that contains the account field of type number and action is a union type and union types are often used to define actions in Type Script because then depending on the action type field value we can already know the type of the payload. Here we don't have any payload so I cannot demonstrate this but later in the next lessons you will see how convenient it is to use the union types to define your actions. Now we also have two action creators one for the increment and another for decrement. They just return the objects with pre-filled type fields. If we look at the component then you'll see that we use the user redu cer where we pass in our counter reducer and the default state. We get the observable state and the dispatch method.

[04:31 - 04:46] When we click on the minus or plus buttons we call the dispatch method with the decrement and increment actions. If you launch and open this app you should see a counter we can press plus or minus and it will change the account value.