easy-peasy

Easy Peasy is a lightweight state management library for React applications. It provides a simple and intuitive API for managing global state, built on top of Redux and Redux Toolkit. Easy Peasy aims to reduce boilerplate code and make state management more accessible for React developers.

Pros

• Simple and intuitive API, reducing the learning curve for state management
• Built-in support for async actions and derived state (computed values)
• Automatic handling of immutability and optimized re-renders
• TypeScript support out of the box

Cons

• Limited ecosystem compared to pure Redux
• May not be suitable for very large-scale applications with complex state requirements
• Potential performance overhead for extremely simple applications
• Less flexibility compared to using Redux directly

Code Examples

1. Creating a store:

import { createStore } from 'easy-peasy';

const store = createStore({
  todos: {
    items: [],
    addTodo: (state, payload) => {
      state.items.push(payload);
    },
  },
});

2. Using the store in a component:

import { useStoreActions, useStoreState } from 'easy-peasy';

const TodoList = () => {
  const todos = useStoreState((state) => state.todos.items);
  const addTodo = useStoreActions((actions) => actions.todos.addTodo);

  return (
    <div>
      {todos.map((todo) => (
        <div key={todo.id}>{todo.text}</div>
      ))}
      <button onClick={() => addTodo({ id: Date.now(), text: 'New Todo' })}>
        Add Todo
      </button>
    </div>
  );
};

3. Using computed values:

import { computed } from 'easy-peasy';

const store = createStore({
  todos: {
    items: [],
    completedTodos: computed((state) => state.items.filter((todo) => todo.completed)),
  },
});

Getting Started

1. Install Easy Peasy:

npm install easy-peasy

2. Create a store:

import { createStore } from 'easy-peasy';

const store = createStore({
  // Your model here
});

3. Wrap your app with the StoreProvider:

import { StoreProvider } from 'easy-peasy';

const App = () => (
  <StoreProvider store={store}>
    {/* Your app components */}
  </StoreProvider>
);

4. Use the store in your components:

import { useStoreState, useStoreActions } from 'easy-peasy';

const MyComponent = () => {
  const someState = useStoreState((state) => state.someState);
  const someAction = useStoreActions((actions) => actions.someAction);
  // Use state and actions in your component
};