How to use a setState Updater Function with a Reducer Pattern

Instructor: [00:01] With our simple application, we have a value and state, as well as two buttons -- one that will increment that value and one that will decrement that value. Because increment and decrement rely on the previous value, we need to use the updater function syntax for a setstate. Let's set up a function that returns a function to achieve the reducer pattern from Redux.

[00:25] When I say reducer, which will equal a function, that takes an argument. That argument will be the action that we want to pass to our reducer. We want to say action equals a function, an arrow function, that returns another function. This will be the function that we call and this one will be what's returned to setstate. Here, we see the state, as well as props.

[01:00] Now, we can then additionally set up two actions. The first one will be "increment" -- I'll just call it "increment" -- and the second will be "decrement." Now, we can set up a similar reducer pattern. We'll do a switch on action.type.

[01:24] If we have increment, then we will return our state...We'll place value with state.value plus one. Now, if we have increment as our type -- I'm sorry, decrement -- then we will return value, state.value minus one.

[01:50] Finally, in the event that this reducer is called with something that we don't recognize, then we'll just return null. With the setstate updater pattern, when we return null, this is effectively telling React to not actually trigger an update. Here, when we return an object with a new value, it will be updated. When we return null, we tell React don't do anything so no re-render will happen.

[02:22] To implement this, we need to call setstate and pass in our reducer with inaction. We're going to call our reducer and pass in inaction with type increment. What this is doing is it's calling our reducer here.

[02:42] That object with type increment is this action, which then returns this function here and that gets passed to setstate. Setstate will then call that function and whatever we return is then passed to React.

[03:03] Now the same goes for our decrement. We can just replace this with the action "decrement." Now if we go into our browser, we can take a look. We press "increment," it adds one, or decrement, or subtract one.

[03:22] Now just like Redux, you can attach data to the action object to influence how the reducer is going to update your state. In our increment, we can pass in an amount of two, and we have to adjust our reducer to look at action. Rather than doing a plus one, we'll say action.amount.

[03:47] Now we are passing in information into our reducer, that is an external state management system. When we come back here, we can press "increment," it'll increment by two and we'll still decrement by one.

[04:00] How this differs from Redux is that we don't have to spread the previous state into the return object. That is all handled through setstate and operates exactly how setstate works, where it will combine any of the previous object values and then merge them together and replace it with the updated value.

[04:20] We don't need to do a spread operator of state. We can just return the things that we want to update.