npm install easy-peasy
Step 1 - Create your store
const store = createStore({
todos: {
items: ['Create store', 'Wrap application', 'Use store'],
add: action((state, payload) => {
state.items.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.items)
const add = useStoreActions(actions => actions.todos.add)
return (
<div>
{todos.map((todo, idx) => <div key={idx}>{todo}</div>)}
<AddTodo onAdd={add} />
</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
Introduction
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, performance optimisation, developer tools etc.
Documentation
See the official website for tutorials, API docs, recipes, and more.
Backers ❤️
Extreme gratitude to all our backers! [Become a backer].