The main goal of this article is to replace Redux with React Context API. We will achieve this by going to any connected component and replace a line of code with a
connect function that we will write.
When you finish reading this article, you'll be able to migrate from Redux to React Context API smoothly, quicker, and without rewriting plenty of code. We will achieve our goal doing these five steps:
- Step 1: Model your reducers in an object
- Step 2: Create the
- Step 3: Create the app's provider
- Step 4: Create the
- Step 5: Connect the components to the provider
If you want to do this tutorial while you read, you can open this CodeSandbox using React and Redux in a new tab, fork it and start coding. The CodeSandbox is embedded at the end of the article for easy reference.
Let's create the folder structure where we are going to place the code. This structure is a suggestion and should not dictate how you organize your code.
directory └─── src | | ... other-directories | |─── provider | | provider.js | | connect.js | | reducers.js | |─── utils | | combineReducers.js | | ... other-directories
reducers.js and start placing all the reducers of the app with it's key inside an object.
First, let's start writing the function that will create the root reducer and the parameters it needs.
In this iteration, we will call each reducer to get its initial state. Pass
undefined as the
state parameter and anything you want as the
action parameter, each reducer will return the initial state provided. Then, the results are added to the
Object.entries() gives us an array of key-value pairs from the
reducers object passed as a parameter.
Now, we are going to write the primary reducer function. We are writing this function to pass it to the useReducer hook later on.
The most important part of this function is to get the next state. We are going to iterate through each
reducer available and pass the
action parameter to get the next state returned by the reducer.
In the iteration, we are going to compare the returned object with the current state. If these objects are not the same, it means there was an update, and we are going to replace the
state with the updated object.
Next, if the state has changed, we will return the updated state. If not, we return the previous state.
Finally, we will return an array with the initial state and the global reducer function. These values will be passed to the useReducer hook.
Let's write the app's provider. Then, import the object containing our reducers and the
combineReducer function from the previous step.
We are not expecting our initial state, or the objects containing the reducers, to change on each re-render. So, let's optimize our function by using the useCallback hook.
useCallback will return a memoized version of the callback that only changes if one of the inputs has changed. There is no need for this function to run on every re-render.
Next, let's wrap up the provider by doing a few more steps. First,
destructure the returned value of the useCallback function and set up the useReducer hook.
Once that's done, create a useMemo hook to wrap the returned value of the useReducer hook. Why useMemo? Since this is the global provider, there are two main reasons:
- Your context value changes frequently
- Your context has many consumers
Finally, let's return the consumer and export the provider and have it ready to pass context to all the children below it.
The HOC function is the last function we will write before we start connecting the component to the provider.
This function will pass the state and the global reducer to each component. This "connects" to React Context Provider API and lets our components consume the values given by it.
The simplest use case of our function is a purely curried one and will take three parameters:
mapDispatchToProps- optional - not all components dispatch actions
Let's place the
Context.Consumer to have access to the global state and dispatch function. Then, let's pass
value.state to the
mapDispatchToProps parameter is optional. If you pass this parameter, pass
value.dispatch to the
Finally, let's combine all
props and add the final result to the component. Now this component is
connected to the React Context API.
Now we can migrate from Redux to React Context Provider API quickly and with little refactoring on our part.
Let's start by replacing the
Provider from Redux with the one we created. Your main app file should look like below:
Finally, let's replace the
connect function imported from Redux with our
connect function. Your component should look like below.
You can access all the properties returned from
props inside the connected component.
Lastly, refresh the page and the app should be connected to the React Context API. Repeat this step to all the components that you want to replace Redux with React Context Provider API.
Here is a CodeSandbox with all the code we wrote and connected to React Context API
So there you have it, in five steps, we successfully moved away from Redux and replace it with React Context API.
- Model your reducers in an object
- Create the
- Create the app's provider
- Create the
- Connect the components to the provider
- Using Context API in React (Hooks and Classes) by Tania Rascia.