简体中文 | English
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', });
| Plugins | NPM |
|---|---|
| immer | immer |
| loading | immer |
| devtools | immer |
MIT