Vegetarian friendly state for React

Easy Peasy provides you with an intuitive API to quickly and easily manage the state for your React application. Batteries are included - no configuration is required to support derived state, API calls, developer tools etc.

 

npm install easy-peasy

 

Step 1 - Create your store

const store = createStore({
  todos: ['Create store', 'Wrap application', 'Use store'],
  addTodo: action((state, payload) => {
    state.add.push(payload)
  })
});

Step 2 - Wrap your application

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

Step 3 - 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>
  );
}

Features

  • Zero configuration
  • No boilerplate
  • React hooks based API
  • Computed properties - i.e. derived data
  • Data fetching / side effects
  • Persist state to session/local storage
  • Testing helpers
  • Extensive TypeScript support
  • Global, shared, or component level stores
  • React Native supported
  • Redux Dev Tools supported
  • Hot Reloading supported

Quick Start