How to use hooks (useContext, useReducer) to replace redux


In the beginning of development with React, Redux has been a great tool for managing data with certain drawbacks. The drawbacks include:

- Sometimes we have too many layers of components if they are connected. The ‘connect’ is actually a Higher Order Component.

- Sometimes we need to pass data through multiple levels to reach the component needed

React has introduced context and its own hook useContext to prevent from passing data through layers. With the hook useReducer, we can easily create a dispatch function by yourself. With the help of context, we can use the dispatch function everywhere, then why not make a try with replacing redux with useContext and useReducer ?

In this article, I will write down a tutorial on how to replace redux by useContext and useReducer with a working example. The code is here.

Some thinking on ‘use’ and ‘with’ in React

Just before this tutorial, I want to share something with hooks. React Hooks reinforce the development of react and make it more flexible. In general, there are two ways : ‘use’ and ‘with’. ‘use’ is always used for customizing hooks, for example, ‘useEffect’, or customized ‘useMyEffect’, ‘useContext’, or ‘useMyContext’. ‘with’ is always used as HOC component. You can check an example of it with my article Create HOC pattern ‘withContext’ for context.

Ok, let’s start our tutorial:

Step 1: Create context

The first step is to create Context. In react-redux, we distinguish state and dispatch with ‘mapStateToProps’ and ‘mapDispatchToProps’, so in our example, we also create two context to distinguish ‘data’ and ‘action’.

Let’s create two contexts: StateContext and DispatchContext with `React.createContext`.

Step 2: Prepare the reducer function

I am making a simple example, and this reducer function supports two actionTypes: ADD and SUBTRACT.

Step 3: Create Context provider for state and dispatch

Then, in the ContextProvider component, we wrap our children component inside the two context providers, to make data and actions available anywhere.

We also need to use useReducer with the reducer function to have state and dispatch, and then pass them as the initial values in `<StateContext.Provider/>` and `<DispatchContext.Provider/>`

Step 4: Create customized hooks for useState and useDispatch

In order to use the state and dispatch actions everywhere in the app, we customize two hook functions.

In the hook useUIDispatch, we get the dispatch function from context, return a series of actions with ActionTypes. We use useCallback and useMemo for memoization.

Step 5: Wrap the <App/> inside the Provider

Step 6: Use customized hooks to get value and dispatch actions

That’s all of it. You can find a working demo on here. Thanks for reading !




Fun of ReactJS, Javascript, Data visualization

Love podcasts or audiobooks? Learn on the go with our new app.

JavaScript ES8

Dockerizing a React Application using NGINX and React-Router

Diaries of a Coding Kid. Day 13

Lightning Web Components are here!

5 ways to center a <div> inCSS

Using Typescript & Vue.js Within an existing MVC / MultiPage Application

Jolt — JSON to JSON transformation library

Jolt-JSON to JSON transformation library

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Albert Yuebai XU

Albert Yuebai XU

Fun of ReactJS, Javascript, Data visualization

More from Medium

How to get data back from a redux-saga from inside a React component

useReducer& Context API & Redux & RTK(Redux Toolkit)

ES Lint “react-hooks/exhaustive-deps” infinite loop potential solution

React state does not update immediately!? This is how to do it.