Vegetarian-Friendly State for React — Easy-Peasy

Easy Peasy provides you with an intuitive API to quickly and easily manage the state for your React application

Riccardo Giorato
Nov 12, 2019 · 3 min read

Why Easy Peasy?

Easy Peasy provides you with an intuitive API to quickly and easily manage the state for your React application. It does this with less code and complexity than other tools, such as Redux.

No extra configurations are required to support derived state, API calls, and performance optimization. More importantly, it fully supports Redux developer tools.

Main Features

  • Zero configuration, no boilerplate
  • React hooks based API
  • Data fetching/side effects
  • Persist state to session/local storage
  • Extensive TypeScript support
  • Global, shared, or component level stores
  • React Native supported
  • Redux Dev Tools supported
  • Hot Reloading supported

Being able to support those last three things will be especially helpful to you while developing your native app or browser web app.


Installing Easy-Peasy only takes a single command. If you are using NPM:

npm install easy-peasy

Or, if you are using Yarn:

yarn add easy-peasy

Basic Usage

  1. Define a Model with a Store and various Actions on these objects.
  2. We just need to import actions to define custom actions, which are called from every component. In the beginning, you put every publicly accessible variable in the store section.

The Store

In the following example, we’re going to build a simple food ordering system where you can add, delete or complete any order in your own restaurant!

We start by defining the model with various functions and the list of orders:

import { action, thunk } from "easy-peasy";
import uuid from "uuid";

const model = {
// Store
foods: [],
// Subroutines to load from API
fetchFoods: thunk(async actions => {
const res = await fetch(
const foodsFromAPI = await res.json();
// Actions
setFoods: action((state, foods) => {
state.foods = foods;
add: action((state, food) => { = uuid.v4();
state.foods = [...state.foods, food];
toggle: action((state, id) => { => {
if ( === id) {
food.completed = !food.completed;
return food;
remove: action((state, id) => {
state.foods = state.foods.filter(food => !== id);

export default model;

Define the Store Provider

Here you’re going to use the two hooks to build a store and to provide its actions and objects for the rest of your React components.

import React from "react";
import model from "./model";
import { StoreProvider, createStore } from "easy-peasy";
import Orders from "./components/Orders";
import AddFood from "./components/AddFood";
import "./App.css";

const store = createStore(model);

function App() {
return (
<StoreProvider store={store}>
<div className="container">
<Orders />
<AddFood />
<br />

export default App;

Finally, use Actions and the Store!

We’re going to build two components, one with the complete list of all our orders that will also ask the Store to initialize the values from the API.

Orders: You are going to use the two most beautiful hooks:

  • useStore to load a specific state from the store
  • useActions to call a specific action from the store like fetchFoods
import React, { Fragment, useEffect } from "react";
import { useStore, useActions } from "easy-peasy";
import FoodItem from "./FoodItem";

const Orders = () => {
const foods = useStore(state => state.foods);
const fetchFoods = useActions(actions => actions.fetchFoods);

useEffect(() => {
// eslint-disable-next-line
}, []);

function foodList() {
return => <FoodItem todo={food} key={} />);

return (
<h2>Food Order System</h2>
Click an order to complete it!
<span role="img" aria-label="">
<hr />

export default Orders;

AddFood: The second similar component will be the form to add a new order to the list; always using the useActions hook with a different function — in this case the add function, which appends a new order.

Complete Codesandbox

Codesandbox link:

If you want to learn more about Hooks

I have personally read Learn React Hooks when I started using hooks and it helped me understand them to use tools such as useActions:

Better Programming

Advice for programmers.

Riccardo Giorato

Written by

XR Developer and Photogrammetry Artist

Better Programming

Advice for programmers.

More From Medium

More from Better Programming

More from Better Programming

More from Better Programming

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