README.en.md

English | 简体中文

icestore

Simple and friendly state for React.

Versions

Version	Branch	Docs
V2	master	Docs
V1	stable/1.x	Docs

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.

Documents

• API
• Recipes
• Upgrade from V1
• Q & A

Examples

• Counter
• Todos
• Class Component Support
• withModel

Basic example

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

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

// 1️⃣ Use a model to define your store
const counter = createModel({
  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

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.

Develop:

$ cd icestore/
$ npm install
$ npm run test
$ npm run watch

$ cd examples/counter
$ npm install
$ npm link ../../                    # link icestore
$ npm link ../../node_modules/react  # link react
$ npm start

License

MIT