# Easy Peasy — Vegetarian-Friendly State Management for React

> A zero-boilerplate abstraction over Redux that provides React hooks, computed properties, effects, and persistence out of the box.

## Install

Save in your project root:

# Easy Peasy — Vegetarian-Friendly State Management for React

## Quick Use
```bash
npm install easy-peasy
```
```jsx
import { createStore, StoreProvider, useStoreState, action } from "easy-peasy";

const store = createStore({
  todos: [],
  addTodo: action((state, payload) => { state.todos.push(payload); }),
});

function App() {
  const todos = useStoreState((s) => s.todos);
  return <StoreProvider store={store}><TodoList /></StoreProvider>;
}
```

## Introduction
Easy Peasy wraps Redux with a clean, hook-based API that eliminates boilerplate. You define your store as a plain JavaScript object with actions, computed properties, and effects. The library handles immutable updates, memoized selectors, and middleware configuration behind the scenes.

## What Easy Peasy Does
- Provides a simple model-based API for defining Redux stores
- Supports actions (sync mutations), thunks (async side effects), and computed properties
- Offers React hooks (useStoreState, useStoreActions) for accessing state
- Includes built-in data persistence, dev tools integration, and TypeScript support
- Allows store injection for testing without mocking Redux internals

## Architecture Overview
Under the hood, Easy Peasy uses Redux as its state container and Immer for immutable updates. When you define a model object, the library traverses it to generate Redux reducers, action creators, and selectors automatically. Computed properties use Reselect-style memoization. The React binding layer exposes hooks that subscribe to specific slices of state, re-rendering only when those slices change.

## Self-Hosting & Configuration
- Install: `npm install easy-peasy`
- Define a store model as a plain object with actions and thunks
- Wrap your app with `<StoreProvider store={store}>`
- Access state and actions via `useStoreState` and `useStoreActions` hooks
- Enable Redux DevTools automatically (no extra configuration)

## Key Features
- Zero boilerplate: no action types, switch statements, or mapStateToProps
- Full TypeScript inference from your model definition
- Built-in persist API for localStorage or AsyncStorage
- Computed properties with automatic memoization
- Redux DevTools support with no additional setup

## Comparison with Similar Tools
- **Redux Toolkit** — official Redux wrapper; Easy Peasy provides an even simpler model-based API
- **Zustand** — minimal store without Redux; Easy Peasy leverages Redux ecosystem compatibility
- **Jotai** — atomic state primitives; Easy Peasy uses a single centralized store
- **MobX** — observable-based reactivity; Easy Peasy uses immutable state with Immer
- **Recoil** — graph-based atoms; Easy Peasy uses a hierarchical model tree

## FAQ
**Q: Do I still need Redux if I use Easy Peasy?**
A: Easy Peasy includes Redux as a dependency and configures it for you. You do not need to install or configure Redux separately.

**Q: Can I use Redux middleware with Easy Peasy?**
A: Yes. Pass custom middleware to `createStore` via the middleware option. Redux Saga, Logger, and other middleware work as expected.

**Q: Is it suitable for large applications?**
A: Yes. Easy Peasy scales well because it splits models into slices and leverages Redux's proven architecture under the hood.

**Q: Does it support React Native?**
A: Yes. Easy Peasy works in any React environment, including React Native and Next.js.

## Sources
- https://github.com/ctrlplusb/easy-peasy
- https://easy-peasy.dev

---
Source: https://tokrepo.com/en/workflows/asset-ce4454d4
Author: AI Open Source