The easy-peasy React state management library

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

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:

npm install 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:

store.js

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

export default createStore({})

We’ll add more things to this file later.

Now wrap your React app into the StoreProvider component provided by easy-peasy. It depends on what you use. With create-react-app for example, add this to your 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 you’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) => {
    state.name = payload
  })
})

Now inside any component of your app you 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. You can add as many state variables and as many actions you want, and I found that centralizing it all to a store.js file makes the application very easy to scale.