Compare NPM Packages

easy-peasy is a state management library for React applications that aims to simplify the process of managing application state. It provides a simple API and integrates seamlessly with React, making it easy to set up and use state management in your projects. While easy-peasy offers a straightforward approach to state management, there are other libraries in the React ecosystem that also provide state management solutions. Here are a few alternatives:

• mobx is a simple and scalable state management library that focuses on making state management simple and efficient. It offers observables and reactions to manage state in React applications.
• redux is a predictable state container for JavaScript applications. It provides a centralized store to manage state and follows a unidirectional data flow pattern.
• redux-toolkit is the official, opinionated toolset for efficient Redux development. It includes utilities to simplify common Redux use cases and helps manage state in a more structured way.
• vuex is the official state management library for Vue.js applications. It provides a centralized store for all the components in an application and ensures that the state is reactive and consistent.

Check out this comparison: Comparing easy-peasy vs mobx vs redux vs redux-toolkit vs vuex.

Vegetarian friendly state for React

Easy Peasy is an abstraction of Redux, providing a reimagined API that focuses on developer experience. It allows you to quickly and easily manage your state, whilst leveraging the strong architectural guarantees and extensive eco-system that Redux has to offer.

• Zero configuration
• No boilerplate
• React hooks based API
• Extensive TypeScript support
• Encapsulate data fetching
• Computed properties
• Reactive actions
• Redux middleware support
• State persistence
• Redux Dev Tools
• Global, context, or local stores
• Built-in testing utils
• React Native supported
• Hot reloading supported

All of this comes via a single dependency install.

npm install easy-peasy

Fly like an eagle 🦅

Create your store

const store = createStore({
  todos: ['Create store', 'Wrap application', 'Use store'],

  addTodo: action((state, payload) => {
    state.todos.push(payload);
  }),
});

Wrap your application

function App() {
  return (
    <StoreProvider store={store}>
      <TodoList />
    </StoreProvider>
  );
}

Use the store

function TodoList() {
  const todos = useStoreState((state) => state.todos);
  const addTodo = useStoreActions((actions) => actions.addTodo);
  return (
    <div>
      {todos.map((todo, idx) => (
        <div key={idx}>{todo}</div>
      ))}
      <AddTodo onAdd={addTodo} />
    </div>
  );
}

Examples 📚

See the example folder for more examples of how to use easy-peasy.

Core Team 🛠

Peter Weinberg

Jørn A. Myrland

Sean Matheson

Our Sponsors ❤️

We have only but great appreciation to those who support this project. If you have the ability to help contribute towards the continued maintenance and evolution of this library then please consider [becoming a sponsor].

Documentation

See the official website for tutorials, docs, recipes, and more.

OS Awards Nominee

Easy Peasy was nominated under the "Productivity Booster" category.