Skip to Main ContentSkip to Footer

Vegetarian-friendly State for React — easy-peasy

November 12, 2019

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.

Installation

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(
https://jsonplaceholder.typicode.com/todos?\_limit=4
);
const foodsFromAPI = await res.json();
actions.setFoods(foodsFromAPI);
}),
// Actions
setFoods: action((state, foods) => {
state.foods = foods;
}),
add: action((state, food) => {
food.id = uuid.v4();
state.foods = […state.foods, food];
}),
toggle: action((state, id) => {
state.foods.map(food => {
if (food.id === id) {
food.completed = !food.completed;
}
return food;
});
}),
remove: action((state, id) => {
state.foods = state.foods.filter(food => food.id !== 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 (









);
}

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(() => {
fetchFoods();
// eslint-disable-next-line
}, []);

function foodList() {
return foods.map(food => );
}

return (

easy-peasy


Food Order System



Click an order to complete it!

🥦




{foodList()}

);
};

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: https://codesandbox.io/s/easy-peasy-food-orders-g9yxc

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 from easy-peasy: https://amzn.to/2Y8hoX9

References and Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter