Easy Peasy — Vegetarian-Friendly State Management for React

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