Replace Redux with React Hooks, the easy way.
Tags: react, redux, javascript, webdev
Published: 2019-11-26 13:41:43

---
title: Replace Redux with React Hooks, the easy way.
published: true
description: A small alternative easy and fast to setup that needs no library.
cover_image: https://miro.medium.com/max/7798/0*4WZtVGNHEovGn5RO
tags: react, redux, javascript, webdev
---

_Photo by [Omer Rana](https://unsplash.com/@omerrana?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com/?utm_source=medium&utm_medium=referral)_

Do you ever wonder if you can really replace Redux with React Hooks when it comes to the global state management of your applications, even the most complex?
It happens to me all the time I need to store some data so I decided not to wait a super-definitive opinion from the community but try firsthand.

> What the hell, I should try anyway if it fits the way I work!

I love using GraphQL but, when I develop a complex application, I still need some kind of global store, so I started searching for articles about how to replace redux store with the `useContext` React hook. I found a few, [this one is very inspiring](https://medium.com/r/?url=https%3A%2F%2Fwww.sitepoint.com%2Freplace-redux-react-hooks-context-api%2F) but I want it to be even cleaner.

The solution I want has to be:
- 🎣 using React hooks;
- 🚫 without switch statements;
- 😌 damn simple and clean;
- 🚀 damn fast to use;
- ♻️ reusable.

## TLDR; This is what I got:

{% codesandbox nqg9i %}

## Woah Slow Down

###Step 0

When I create the Store with _Store.js_ i need the `initialState` and the `reducers`, the latter has to be defined as a single object where every single property is a reducer function:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/8kr346ll2x1vq3g7h9l0.png)

Then `createStoreProvider` high order function returns another function that has, as only parameter, the inner component for the Store provider so that you can nest in that point the components that will have access to the global state.

### Step 1

The body of the second function sets up a way to retrieve and use the right reducer function from the initial reducers object and uses it with the `useReducer` [React hook](https://reactjs.org/docs/hooks-reference.html#usereducer) so that every action will change the global state in its own way:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/zf43opir69tiqxiukt1i.png)

### Step 2

The store [context](https://reactjs.org/docs/hooks-reference.html#usecontext) that we will use as global state will now be used as [context provider](https://reactjs.org/docs/context.html#contextprovider); it will provides an object with 2 properties: the global state itself and a function that we will use to change the state:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/6ggbm66c1f2bb0fb7dfv.png)

And that’s it.
[Github gist](https://gist.github.com/AlessandroAnnini/c29b38a1c22eaebd5b5578828288dd6c).

### Step 3 (use it!)

When we want to use the state in a component we only need to import the created Store and read the needed property with the help of the `useContext` React hook:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/hwp67eyvwe2yukcfbq3l.png)

Destructuring the store context we can access to both the current state and the `dispatch` function that can be used to send changes to our store selecting
- _what_ to change thanks to the action _type_ property and
- _how_ to change state thanks to the _payload_ property
just like we used to do in redux.

## ⚠️ Downsides
When creating React context as global store you have to be aware that every time you update a value in the store, this will re-render every component that uses it, and this could create a huge performance problem!

### Solutions
- This one is the cleaner: use multiple contexts so when you update one only the components that are actually using values from that store will re-render
- Use `useMemo` React hook, this way, you can specify, for every component using the global store, on which property change it will react.
I updated the previous example for this solution:

{% codesandbox 9h4zw %}

## Conclusions

I like the way it all blends in my code, it’s easy to manage, it does not need updates until I say so. It’s easy enough to rewrite if you are offline camping alone in a forest.

Redux principles are still valid with this setup:

- ✅ Single source of truth
- ✅ State is read-only
- ✅ Changes are made with pure functions

It is true that Redux has more plugins and tools but at the end of the day I think that having a simple code in the first place is the best way to start off a new project and understand what happens when it runs.

If you want a readymade, working solution for a global store using React hooks you can take a look to the following projects:

{% github jhonnymichel/react-hookstore no-readme %}

{% github forsigner/stamen no-readme %}

{% github ice-lab/icestore no-readme %}

🙏 Thanks to [Full-Staks Magazine](https://t.me/full_stacks) for helping me out with downsides!

## About Me
I’m [Alessandro Annini](https://www.linkedin.com/in/alessandroannini), I work at [Scriby.it](https://scriby.it/), my own company, offering software development and consulting services.

Originally posted on Medium {% medium https://medium.com/@alessandro.annini/replace-redux-with-react-hooks-the-easy-way-4ce9fe2cf231 %}