Skip to content

README.md

Latest commit

 

History

History
149 lines (120 loc) · 4.15 KB

README.md

File metadata and controls

149 lines (120 loc) · 4.15 KB

 

Vegetarian friendly state for React

 

npm MIT License Codecov

v7 Beta — this release modernises Easy Peasy around React 19's concurrent primitives. The public store/model API is unchanged from v6 and the library is feature-complete, but the v7 line is still in beta — APIs may shift in response to feedback before the stable release. See the v6 → v7 upgrade guide for details, or view the v6 docs for the current stable release.

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. While v7 is in beta it is published under the beta dist-tag — the latest tag will move to v7 once the stable release ships.

npm install easy-peasy@beta

 

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.