Moving Global State from Redux to React Hooks

Quique Fdez. Guerra
Jun 22 · 4 min read

The version 16.8 of React introduced a new concept called hooks, this change have created a lot of excitement in development community. One of the interesting changes that this version introduces is useReducer, this hook can help us to stop using Redux (if we consider this necessary) and use a simpler solution.

Why we want to move from Redux to another solution?

If you like Redux, probably you will have enough with redux-hook and you can stop reading this article right now 😳. But in my case, I always feel that Vuex or other simpler solutions are a better solution in the 90% of the projects where I work, and I tried to add this simplicity to our projects.

What we want?

As always when you are creating something, there are some requirements to achieve.

  • Has to be simpler than using Redux, otherwise we will use redux.
  • If we can find some parts made from 3rd party will try to use them.
  • If we use 3rd party libraries that libraries must use new React APIs.
  • We have to be able to understand this new approach with the classical schema about Redux, Vuex, and other kind of techniques.
  • We want to avoid magic strings and other typical bad practices.
  • We have to be able to use namespaces in the global state approach.

Creating the Store

First of all we have to create the ‘store’ folder, under ‘src’ folder.

The index file will export all the namespaces or modules of my store, to be able to import any of them into my components and hooks.

Each namespace is going to be a new file with the following structure:

  • name: The name of our namespace.
  • Type: A Enum-like object with unique names for the cases of our reducers.
  • state: The state content initialized.
  • reducers: An object with all the reducers that we need.

Let’s see it in an example:

Now we are going to use ‘react-hookstore’ package as a helper to define our stores, this is how they define it:

A very simple and small (1k gzipped!) state management lib for React that uses the bleeding edge React’s useStatehook. Which basically means no magic behind the curtains, only pure react APIs being used to share state across components.

Using the store

Now is time to use the store wherever we need, the easiest way is to import the stores that we need and invoke the hook ‘useStore’.

As you can see, in this example we are not using ‘actions’ and directly calling to the reducers, for more complex scenarios we are going to use actions.

Using actions

One of the best things of all this way to use global state is that actions can be hooks 🤯 using the last example we are going to move it to a hook, to divide our code and reduce the coupling.

First of all, we move all the ‘data’ logic to the hook, to detect which kind of logic could be moved to a hook I think on this:

If the logic could be moved to a Service, you can move it to a hook, if the logic is candidate to be a Helper or Util, continue using this approach.

And now, let’s use this hook in the component.

We did it 🥳, if you want to practice with the code of this article you can use this link from codesandbox.

Quique Fdez. Guerra

Written by

Technology is my passion, DL & Dev at @PlainConcepts also happy @HelpDev_ founder.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade