Create Redux-like Middleware for useReducer in React

Now that useReducer has become a commonly used react hook, we might want to replicate the idea of middleware for the useReducer hook as…

If you have used Redux before, you would be aware of the concept of middlewares. Now that useReducer has become a commonly used react hook, we might want to replicate the idea of middleware for the useReducer hook as well.

If you do not know about middlewares, middlewares are functions that run either before or after a state transition has taken place by the reducer. It enables us to opt-in for features such as logging, crash reporting, making asynchronous API requests, etc.

In this post, we will be creating a middleware for useReducer react hook. If you want to read more about the hook and reducers in general, refer to our previous post about the useReducer React hook.

Possible approaches for creating the middleware for useReducer

We can implement the middleware functionality in one of two ways:

1. Writing an applyMiddleware function similar to redux. This function will take in the first parameter as the reducer, and we pass the middlewares as an array in the second parameter.

This would look something like this:

const useMyReducer = applyMiddleware(useReducer, [logging, thunks, ...]);

You can read more about this approach as part of this GitHub issue. The final implementation can be found here.

2. We can create a custom react hook which internally implements useReducer and gives us the functionality of passing in the middlewares as a parameter.

We will be talking about the second approach in this blog post. The first approach is acceptable too. But my opinion is that if we are thinking in terms of hooks, we should move forward with respect to hooks instead of holding on to redux patterns.

react-hook javascript redux reactjs

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

In this article, you will learn what are hooks in React JS? and when to use react hooks? Also, we will see the react hooks example.

In this post, I will share my own point of view about React Hooks, and as the title of this post implies, I am not a big fan.

React hooks tutorial for beginners, learn React hooks step by step: Introduction, useState Hook, useState with previous state, useState with object, useState with array, useEffect Hook, useEffect after render, Conditionally run effects, Run effects only once, useEffect with cleanup, useEffect with incorrect dependency, Fetching data with useEffect, useContext Hook, useReducer Hook, useReducer, Multiple useReducers, useReducer with useContext, Fetching data with useReducer, useState vs useReducer, useCallback Hook, useMemo Hook, useRef Hook

In this video I wanted to show the basics of Redux in React, I didn't go over anything complex as I wanted this to be a beginners introduction into Redux. Let me know in the comments if you would like to see more content on redux such as Redux Thunk.