Skip to content

🌲 Simple and friendly state for React

License

Notifications You must be signed in to change notification settings

ice-lab/icestore

Repository files navigation

简体中文 | English

icestore

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

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 的灵感来自于 rematchconstate

参与贡献

欢迎通过 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