简体中文 | English

rxloop

rxloop = Redux + redux-observable.

基于 RxJS 的可预测状态管理容器，超轻量级的 “redux + redux-observable” 架构。

特性

• elm 概念：通过 reducers、pipes 组织 model，支持多状态或单一状态树；
• 易学易用：仅有五个 api，对 Redux、RxJS 用户友好；
• 插件机制：比如 @rxloop/loading 可以自动处理 loading 状态，@rxloop/devtools 可视化状态树，便于代码调试；
• 扩展 RxJS：rxloop 能够串联到 RxJS 数据管道之中，最终能够分发出多个数据管道。

安装

rxjs 需要作为 peer dependency 引入。

通过 npm 方式：

$ npm install @rxloop/core rxjs

或者 yarn 方式

$ yarn add @rxloop/core rxjs

快速上手

import rxloop from '@rxloop/core';

// 在一个应用创建一个全局唯一的 app
const store = rxloop();

// 在应用中，可以创建多个业务模型，比如下面的 user 和 counter 模型
store.model({
  name: 'user',
  state: { name: 'wxnet' }
});

store.model({
  name: 'counter',
  state: {
    counter: 0,
  },
  reducers: {
    inc(state) {
      return {
        ...state,
        counter: state.counter + 1
      };
    },
    dec(state) {
      return {
        ...state,
        counter: state.counter - 1
      };
    },
  },
});

// 在 View 层订阅 counter 模型的状态
// 当模型状态变更时，使用 View 层框架相关方法同步 View 的更新，比如 React 的 setState 方法
store.stream('counter').subscribe((state) => {
  // this.setState(state);
});

// 在 view 层，可以通过 dispatch 方法派发 action
// action 会经由 pipes 或 reducers 更新 model 状态
store.dispatch({
  type: 'counter/inc',
});

store.dispatch({
  type: 'counter/inc',
});

store.dispatch({
  type: 'counter/dec',
});

集成

1. 与 Vue 集成
2. 与 React 集成

插件

Plugins	NPM
immer
loading
devtools

更多示例

1. 基本的计数器
2. 单一状态和多状态树
3. 错误处理
4. 取消异步请求
5. 使用 react-rxloop 绑定 react 和 rxloop
6. 任务列表应用
7. loading 插件
8. immer 插件

文档索引

• 介绍
• 基础
  • 快速上手
  • 错误处理
  • 示例
• 高级特性
  • 请求取消
  • 与 RxJS 集成
  • 多状态与单一状态树
  • 在 Model 之间传递消息
  • 中间件
  • TypeScript
• API
• 更新记录

协议许可

MIT