react-remux
Version:
137 lines (102 loc) • 4.99 kB
Markdown
# 什么是Remux
<a name="8e1b944f"></a>
### 背景
目前，在 react 的数据状态管理领域最有影响力有两大流派，
- 一类是以函数式编程为代表的 redux，特点是通过单 store 与约定状态为不可变数据结构，使得状态易追踪与回溯，可预期。
- 一类是以响应式编程为代表的 mobx，特点是允许对状态进行直接修改，通过 observable 对 view 进行更新。
<a name="5dc99f6e"></a>
### 问题
从目前现状来看，redux 单一数据源带来了天然数据收集和管理的优势，但开发的时候，我们烦扰于
- redux 过多的代码模版（当然，社区也出现了很多优秀的去形式化，简化代码的库如：[dva](https://github.com/dvajs/dva) [iron-redux](https://github.com/nefe/iron-redux/blob/master/README-CN.md?spm=ata.13261165.0.0.5ee64d4aoYecZD&file=README-CN.md)）
- 单store 在跨项目复用的时候痛苦的抽离以及注入新项目可能对已有的结构造成影响。
- store 的生命周期不一定是和 view 生命周期对应，缺少生命周期管理。
- 单store 的按需加载和卸载，每一次都需要重新合并 reducer ，重新调用 replaceReducer 全局刷一遍。（参考dva）
<a name="fb49bb53"></a>
### 我们真正需要的点
- 保留目前单 store 和中间件的优势。
- 解决多项目复用问题、代码模版过多问题。
- model 层的生命周期管理。
- 拥有按需加载的能力及良好的挂载性能。
- 接轨 redux 社区生态和使用习惯。
- 学习心智成本低，使用方便。
<a name="cefc6f8e"></a>
### 什么是 remux
remux 是基于 redux 包装，可插拔的状态管理+渐进式的多 store 实例的开发框架，用来开发 react 应用程序。
它提供以下能力：
- 中心化数据的能力（保留单 store 方便处理数据源的优势）。
- 动态挂载局部数据到全局的能力。（这里是多 store 实例的挂载，而非单 store 实例的 inject）
- 拥有类 dva 的最佳实践范式约束。
- model 的生命周期管理，可以用于和 view 层关联。
- 强大的插件机制、丰富的插件生态（可以直接复用 redux 插件生态）。
- 和现有的 Redux devtools 进行无缝结合，进行调试和状态回放操作。
- 提供 hooks
<a name="d9695a6b"></a>
### remux 的设计理念：
1. **分布式挂载，中心式管理** - 以 namespace 为命名空间，每个 store 实例自己处理挂载，注销，以及数据管理，统一挂载在 store manager 上。
1. **store即沙箱** - store 作为沙箱，state，plugin，middlware天然隔离，隔离内部的业务逻辑。
1. **按需获取store** - 通过 store manager 不仅可以获得自己 store 里的数据，也有能力获得别的 store 的数据。
1. **丰富的中间件机制** - 提供更加丰富的中间件机制，来对 remux 进行增强，也可以直接复用 redux 中间件生态。
1. **内置中间件简化流程** - **简化代码** 默认支持**异步**（基于redux-saga）、**hooks** 、**loading态** 、**dispatch 默认返回 promise**。
<a name="c182e73c"></a>
### 快速开始
1. 首先定义一个store的 json scheme
```javascript
export default {
namespace:"app",
state: {
count: 0
},
reducers: {
increment(state) {
return{
count: state.count+1
}
}
},
effects:{
async asyncIncrement(state, { dispatch }) {
function delay(timeout) {
return new Promise(resolve => setTimeout(resolve, timeout));
}
await delay(1000);
dispatch({
type: "increment"
});
}
}
}
```
2. 创建 store 的实例
```javascript
import { Provider } from 'react-remux';
export default ()=>{
return <Provider model={model}><App/></Provider>
}
```
3. 与 view 绑定,并在组件中使用
```javascript
import {connect} from 'react-remux';
@connect(state=>state.app);
class App extends React.Component {
render() {
const { count ,dispatch } = this.props
// 常规写法
const onClickHandler = ()=>dispatch({type:'app/increment'}})
// 简写
const onClickHandler = ()=>dispatch({type:'increment'}})
// 直接不写type
const onClickHandler = ()=>dispatch({count：count+1}})
return <div>
<button onClick={onClickHandler}>add</button>
<span>{count}</span>
</div>
}
}
```
<a name="2c2b7395"></a>
### 多store的数据流
我们对比一下 redux 数据流和 remux 数据流的区别：
redux 数据流
remux 数据流
