简体中文 | English
简单友好的状态管理方案。
| 版本 | 代码分支 | 文档 |
|---|---|---|
| V2 | master | Docs |
| V1 | stable/1.x | Docs |
icestore 是面向 React 应用的、简单友好的状态管理方案。它包含以下核心特征：
- 简单、熟悉的 API：不需要额外的学习成本，只需要了解 React Hooks，对 Redux 用户友好。
- 集成异步处理：记录异步操作时的执行状态，简化视图中对于等待或错误的处理逻辑。
- 支持组件 Class 写法：友好的兼容策略可以让老项目享受轻量状态管理的乐趣。
- 良好的 TypeScript 支持：提供完整的 TypeScript 类型定义，在 VS Code 中能获得完整的类型检查和推断。
查看《能力对比表》了解更多细节。
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