tangchang / icestore

🌩 Simple and friendly state for React

English | 简体中文

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 asyncDecrement() {
      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, asyncDecrement } = dispatchers;
  return (
    <div>
      <span>{count}</span>
      <button type="button" onClick={increment}>+</button>
      <button type="button" onClick={asyncDecrement}>-</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);

Installation

icestore requires React 16.8.0 or later.

npm install @ice/store --save

Documents

• API
• Recipes
• Upgrade Guidelines
• Migration
• Q & A

Examples

• Counter
• Todos
• Class Component Support
• withModel

Browser Compatibility

✔	✔	✔	9+ ✔	✔	✔	✔

Inspiration

icestore refines and builds upon the ideas of rematch & constate.

Contributors

Feel free to report any questions as an issue, we'd love to have your helping hand on icestore.

If you're interested in icestore, see CONTRIBUTING.md for more information to learn how to get started.

ICE Ecosystem

Project	Version	Docs	Description
icejs		docs	A universal framework based on react.js
icestark		docs	Micro Frontends solution for large application
icestore		docs	Simple and friendly state for React
iceworks		docs	Universal Application Development Pack for VS Code

Community

DingTalk community	GitHub issues	Gitter
	issues	gitter

License

MIT