Jalaj Gupta

Jalaj Gupta

The easy-peasy React state management library

The easy-peasy React state management library

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

Every application needs to manage state. In React, we can go a long way using hooks, and in particular useState(), and passing props around.

In my personal projects when things get more complicated than that, I like to immediately jump to a state management library. One of my favorites lately is easy-peasy.

It builds on top of Redux, and it provides a simpler way to interact with state.

I like to keep my code as simple as possible. Simple is understandable. Simple is beautiful.

Complexity should be avoided at all costs, and if possible hidden away in libraries that expose a simple interface to us. It’s the case of this library, and that’s why I like it!

Install it using:

yarn add easy-peasy

First of all we need to create a store. The store is the place where we’ll store our state, and the functions needed to modify it.

Create the store in the file store.js in the root of your project, with this content:

import { createStore, action } from 'easy-peasy'

export default createStore({})

We’ll add more things to this file later.

Now let's wrap our React app into the StoreProvider component provided by easy-peasy. It depends on what you use. With create-react-app for example, I'll add this to my index.js file:

//...
import { StoreProvider } from 'easy-peasy'
import store from '../store'

ReactDOM.render(
  <React.StrictMode>
    <StoreProvider store={store}>
      <App />
    </StoreProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

This operation makes now our store available in every component of the app.

Now we're ready to go in the store.js file and add some state, and some actions to change that state.

Let’s do a simple example. We can create a name state, and we create a setName action to change the name:

import { createStore, action } from 'easy-peasy'

export default createStore({
  name: '',
  setName: action((state, payload) => {
    name = payload
  })
})

Now inside any component of our app we can import useStoreState and useStoreActions from easy-peasy:

import { useStoreState, useStoreActions } from 'easy-peasy'

We use useStoreState to access the store state properties:

const name = useStoreState((state) => state.name)

and useStoreActions to access the actions we defined:

const setName = useStoreActions((actions) => actions.setName)

Now we can call this action whenever something happens in our app, for example if we click a button:

<button
  onClick={() => {
    setName('newname')
  }}
>
  Set name
</button>

Now any other component that is accessing the state through useStoreState() will see the value updated.

This is a simple example but it all starts from this. We can add as many state variables and as many actions we want, and I found that centralizing it all to a store.js file makes the application very easy to scale.

#reactjs#redux
 
Share this