简体中文 | English
简单友好的状态管理方案。
NPM version build status NPM downloads codecov
| 版本 | 代码分支 | 文档 |
|---|---|---|
| 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