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

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 (
<StoreProvider store={store}>
<div className="container">
<Orders />
<AddFood />
<br />
<img
src="https://easy-peasy.now.sh/assets/img/happy-peas.dc3eb36b.png"
alt=""
/>
</div>
</StoreProvider>
)
}

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:

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) => <FoodItem todo={food} key={food.id} />)
}

return (
<Fragment>
<h1>easy-peasy</h1>
<h2>Food Order System</h2>
<p>
Click an order to complete it!
<span role="img" aria-label="">
🥦
</span>
</p>
<hr />
{foodList()}
</Fragment>
)
}

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.

import React, { useState } from "react"
import { useActions } from "easy-peasy"

const AddFood = () => {
const [title, setTitle] = useState("")

const add = useActions((actions) => actions.add)

return (
<div>
<form
onSubmit={(e) => {
e.preventDefault()
add({
title,
completed: false,
})
}}
>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Add a new food order..."
/>
<input type="submit" value="Add Order" />
</form>
</div>
)
}

export default AddFood

Complete Codesandbox

Codesandbox link: https://codesandbox.io/s/easy-peasy-food-orders-g9yxc

References and Resources