Moving Global State from Redux to React Hooks

Image for post
Image for post

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?

Image for post
Image for post
Simple Redux cycle from Novoda blog

What we want?

  • 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

Image for post
Image for post
Example of folder structure

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.

Image for post
Image for post
How index.js looks like

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:

Image for post
Image for post
Example of our store

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.

Image for post
Image for post
How we export the store

Using the store

Image for post
Image for post
Example of using the store

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

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.

Image for post
Image for post
How the hook looks like

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

Image for post
Image for post
Using the hook

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

Breaking projects at @PlainConcepts during day. Dreaming at @HelpDev_ , streaming at @JavascriptIO and learning at @NeedU_org over the night • Web GDE

Quique Fdez. Guerra

Written by

Breaking projects at @PlainConcepts during day. Dreaming at @HelpDev_ , streaming at @JavascriptIO and learning at @NeedU_org over the night • Web GDE

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

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