Using useReducer with useContext
Posted on 19th June 2021
5 min read•
useReducer is a hook we can use to manage an advanced state and
useContext is used to share state between components.
If we combine both of them we can more easily manage multiple state across components without needing a separate state management library.
This post will not be an introduction to
useContext, so I’ll include links to both of them if you want to learn about them first.
Setting up the context
Let’s start with creating the context.
context folder and in it the
Then define the initial state.
After that we’ll create the
reducer with our actions. For example we’ll set up two actions, one to set the new value and one to clear it.
A couple of notes about the reducer.
- The default value of the
- If we want to change the value of the state, it will be passed through the
payloadfield in the
actionobject (as we’ll see later when we try to set a new value).
Next we’ll need to initialize the context.
We need to pass the value to be shared as the argument for
createContext. Since we need both the value(
state) and a way of changing it(
dispatch), both will be passed as an object to
After that let’s create a wrapper for the root component so that the state can be shared with it’s child components.
useReducer will be given as an object to the
value prop of
To finish setting up the context, all we need to do is to wrap the root component with
Using the shared state
Now that we’ve set up the context, let’s create a couple of components to see how the state will be shared.
To start create
Then import the
ValueContext and get it’s value using
Next let’s add an
input and a handler for it.
We can change the state using
dispatch. The action
type will be
"SET_VALUE" (like we defined in
To finish up the the
Input component, let’s add a button to clear the state and add it to the root component.
Let’s create a simple so we can see the state being updated across components.
Then add it to the root component.
All the code is available on CodeSandbox.
This is a pattern is started using more of recently. If you would like to suggest an improvement leave a comment below.
Leave a Reaction below