What Is Easy Peasy?

It is said to be 'Vegetarian friendly state for React'. Easy Peasy is an abstraction of Redux, providing a re-imagined API that focuses on developer experience. It allows you to quickly and easily manage your state, whilst leveraging the strong architectural guarantees and extensive eco-system that Redux has to offer.

Some of the benefits of Easy Peasy include:

• React Native supported
• Built-in testing utils
• Global, context, or local stores
• Extensive TypeScript support
• React hooks based API
• Redux middleware support

How to Install

It is accessible via the node package manager and can be installed using the following command:

npm install easy-peasy

Then, create a store inside your src directory, add the code below, and give it a name like store.js.

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

const store = createStore({
  snacks: ["Pizza🍕", "Burger🍔", "Taco🌮"],
  addSnack: action((state, payload) => {
    state.snacks.push(payload);
  }),
  count: 0,
  addCount: action((state, payload) => {
    state.count + 1
  })
});

export default store;

The imported createStore function allows us to pass an object as an argument. The snacks and count properties are variables like any other and can be assigned any value. The addSnack and addCount properties are functions.

Every function inside the store should be assigned the action method which accepts a state and a payload as arguments. The function logic can then be put inside the curly brackets. Notice how the addSnack function references state.snacks and addCount references state.count.

Next, wrap the entry point of your application using the Store Provider as shown below. This is usually the index.js file inside the src directory.

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

<StoreProvider store={store}>
    <App />
</StoreProvider>

Make sure to import the JavaScript file that contains the Easy Peasy store configuration shown above using the relative path. Wrapping the App component like this makes the store variable accessible in all of your React components.

In order to use the store in your React component, you need to import the useStoreState and useStoreActions modules into your React component.

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

const MyComponent = () => {
    const snacks = useStoreState((state) => state.snacks); // Accessing the global state of 'snacks'
    const addSnack = useStoreActions((actions) => actions.addTodo);
    const age = useStoreState((state) => state.count);
    const add = useStoreActions((actions) => actions.addCount);
    return (
        <div>
        <ul>
         {snacks.map((item, index) => (
            <li key={item}>{item}</li>
         ))}
        </ul>
        <p>My Age: {age}</p>
        <button onClick={add}>Add 1 Year</button>
        </div>
    )
}

Use Cases

Easy Peasy comes in handy where the React useState hook doesn't suffice. Sometimes you need state that is accessible throughout the application instead of a single page. Easy Peasy provides all the benefits that Redux has to offer in a simple API that is beginner-friendly.

As the name suggests, it is vegetarian friendly🫛 which implies that it is healthy and uses the best practices that Redux has to offer. Ever since discovering it, I have started to use it more often in my day-to-day coding and I don't see myself going back.

I know this was a short article but that's just because of how simple Easy Peasy is. I hope you enjoyed this article and feel free to let me know what you think via the contact section. Until next time, happy coding!✌️