easy-peasy

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: {
    items: ['Create store', 'Wrap application', 'Use store'],
    add: action((state, payload) => {
      state.items.push(payload);
    }),
  },
});

Wrap your application

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

Use the store

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

Documentation

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

Reference

Below are the reference links:

No. Link
1. Read more here.
2. Follow code author here.