kigh143 / easy-peasy

Easy peasy state for React

 

Easy peasy state for React

 

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 you 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>
  )
}

Highlights

• React hooks based API
• Simple, intuitive API focusing on speed of development
• Thunks for data fetching and side effects
• Selectors for derived data
• Global, shared, or component level stores
• Immutable data store under the hood
• Typescript definitions baked in
• React Native supported
• Testing helpers baked in
• Wraps Redux, all the radness, without the boilerplate
• Redux Dev Tools support built in
• Supports Redux middleware and enhancers

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

The official website contains all the tutorials and documentation you will need to get started.