Awesome

简体中文 | English

icestore

简单友好的状态管理方案。

版本

介绍

icestore 是面向 React 应用的、简单友好的状态管理方案。它包含以下核心特征：

• 简单、熟悉的 API：不需要额外的学习成本，只需要了解 React Hooks，对 Redux 用户友好。
• 集成异步处理：记录异步操作时的执行状态，简化视图中对于等待或错误的处理逻辑。
• 支持组件 Class 写法：友好的兼容策略可以让老项目享受轻量状态管理的乐趣。
• 良好的 TypeScript 支持：提供完整的 TypeScript 类型定义，在 VS Code 中能获得完整的类型检查和推断。

查看《能力对比表》了解更多细节。

文档

• API
• 更多技巧
• 从 V1 版本升级
• 常见问题

示例

• Counter
• Todos
• Class Component Support
• withModel

快速开始

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️⃣ 使用模型定义你的状态
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️⃣ 创建 Store
const store = createStore(models);


// 3️⃣ 消费模型
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️⃣ 绑定视图
const { Provider } = store;
function App() {
  return (
    <Provider>
      <Counter />
    </Provider>
  );
}

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

安装

使用 icestore 需要 React 在 16.8.0 版本以上。

npm install @ice/store --save

灵感

创造 icestore 的灵感来自于 rematch 和 constate。

参与贡献

欢迎通过 issue 反馈问题。

开发:

$ 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