Remux - Redux多实例的解决方案

背景

目前，在 react 的数据状态管理领域最有影响力有两大流派：

• 一类是以函数式编程为表明的 redux，特色是经过单 store 与约定状态为不可变数据结构，使得状态易追踪与回溯，可预期。
• 一类是以响应式编程为表明的 mobx，特色是容许对状态进行直接修改，经过 observable 对 view 进行更新。

问题

以redux为例，从目前现状来看，redux 单一数据源带来了自然数据收集和管理的优点，但开发的时候，咱们烦扰于

• redux 过多的代码模版（固然，社区也出现了不少优秀的去形式化，简化代码的库如：dva iron-redux）
• 单store 在跨项目复用存在难抽离及注入新项目须要根据项目进行改造代码风格。
• store 的生命周期不必定是和 view 生命周期对应，缺乏生命周期管理。
• 单store 的按需加载和卸载，每一次都须要从新合并 reducer ，从新调用 replaceReducer 全局刷一遍。（参考dva）
• 想使用 hooks ，又舍不得 redux 繁荣的社区，还不想要影响到当前已经稳定的项目。

咱们真正须要的点

• 保留目前单 store 和中间件的优点。
• 解决多项目复用问题和代码模版过多问题。
• model 层的生命周期管理。
• 拥有按需加载的能力及良好的挂载性能。
• 接轨 redux 社区生态和使用习惯。
• 学习心智成本低，使用方便。
• 提供简单又强大的 hooks

什么是 remux

remux 是基于 redux 包装，可插拔式状态管理，渐进式式开发的多 store 实例的框架。

它提供如下能力：

• 中心化数据的能力（保留单 store 方便处理数据源的优点）。
• 动态挂载局部数据到全局的能力。（这里是多 store 实例的挂载，而非单 store 实例的 inject）
• 拥有类 dva 的最佳实践范式约束。
• model 的生命周期管理，能够用于和 view 层关联。
• 强大的插件机制、丰富的插件生态（能够直接复用 redux 插件生态）。
• 和现有的 Redux devtools 进行无缝结合，进行调试和状态回放操做。
• 提供简单又强大的 hooks

remux 的设计理念：

1. 分布式挂载，中心式管理 - 以 namespace 为命名空间，每一个 store 实例本身处理挂载，注销，以及数据管理，统一挂载在 store manager 上。
2. store即沙箱 - store 做为沙箱，state，plugin，middlware自然隔离，隔离内部的业务逻辑。
3. 按需获取store - 经过 store manager 不只能够得到本身 store 里的数据，也有能力得到别的 store 的数据。
4. 丰富的中间件机制 - 提供更加丰富的中间件机制，来对 remux 进行加强，也能够直接复用 redux 中间件生态。
5. 内置中间件简化流程 - 简化代码 默认支持异步（基于redux-saga）、hooks 、loading态 、dispatch 默认返回 promise。

快速开始

1. 首先定义一个store的 json scheme

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 的实例

import { Provider } from 'react-remux';
export default ()=>{
  return <Provider model={model}><App/></Provider>
}
复制代码

3. 与 view 绑定,并在组件中使用

• class component

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>
    }
}
复制代码

• function component

import {
  useSelector,
  useDispatch,
  shallowEqual
} from 'react-remux';
const App = ()=>{
		const dispatch = useDispatch()
		const state = useSelector((store: any) =>store.app, shallowEqual);
		// 常规写法
        const onClickHandler = ()=>dispatch({type:'app/increment'}})
		// 简写
        const onClickHandler = ()=>dispatch({type:'increment'}})
		// 直接不写type
        const onClickHandler = ()=>dispatch({count：state.count+1}})
        return <div> <button onClick={onClickHandler}>add</button> <span>{count}</span> </div>
    
}
复制代码

想了解更多，请跳转

完整的示例请参考：
Todos App
Guide
remux-fractal

多store的数据流

咱们对比一下 redux 数据流和 remux 数据流的区别：

redux 数据流

remux 数据流

最后

remux 站在巨人的肩膀上借鉴了 redux 和 dva 的一些优秀设计理念，例如单向数据流状态可追踪，中间件机制，redux-saga的集成，内置的 loaidng、promise，而且针对使用 redux 中的一些痛点做了再设计，使其易上手、易调试、可扩展。

最后若是在使用过程当中遇到任何问题或者有功能建议欢迎经过 issue 反馈给咱们，很是感谢。