icestore

Simple and friendly state for React.

🕹 CodeSandbox demos 🕹
Counter	Todos

Introduction

icestore is a simple and friendly state management library for React. It has the following core features:

Minimal & Familiar API: No additional learning costs, easy to get started with the knowledge of Redux && React Hooks.
Built in Async Status: Records loading and error status of effects, simplifying the rendering logic in the view layer.
Class Component Support: Make old projects enjoying the fun of lightweight state management with friendly compatibility strategy.
TypeScript Support: Provide complete type definitions to support intelliSense in VS Code.

See the comparison table for more details.

Basic example

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from '@ice/store';

const delay = (time) => new Promise((resolve) => setTimeout(() => resolve(), time));

// 1️⃣ Use a model to define your store
const counter = {
  state: 0,
  reducers: {
    increment:(prevState) => prevState + 1,
    decrement:(prevState) => prevState - 1,
  },
  effects: () => ({
    async decrementAsync() {
      await delay(1000);
      this.decrement();
    },
  })
};

const models = {
  counter,
};

// 2️⃣ Create the store
const store = createStore(models);

// 3️⃣ Consume model
const { useModel } = store;
function Counter() {
  const [ count, dispatchers ] = useModel('counter');
  const { increment, decrementAsync } = dispatchers;
  return (
    <div>
      <span>{count}</span>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={decrementAsync}>-</button>
    </div>
  );
}

// 4️⃣ Wrap your components with Provider
const { Provider } = store;
function App() {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}

const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);