...

/

Using the Reducer in a React Component

Using the Reducer in a React Component

Learn how to use a reducer to add actions to the application components.

Adding a Counter component

So far, we’ve talked much about the reducer pattern outside any framework. Let’s pull our counterReducer into React and see how it works. We’ll start with this simple component:

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
Adding a simple counter component

We can see that there isn’t much happening just yet. The counterReducer that we’ve been working on is ready for action. We just need to hook it up to the component using the useReducer hook.

In the code above, we define a functional Counter component using arrow function ...