6.1 高阶reducer
高阶reducer就是将reducer作为参数或者返回值的函数。
6.1.1 reducer的复用
6.1.2 reducer的增强
高阶reducer主要通过3点来增强reducer:
能够处理额外的action。
能够维护更多的state。
将不能处理的action委托给原始reducer处理。
6.2 Redux与表单
6.2.1 使用Redux-form-utils减少创建表单的冗余代码
Redux-form-utils提供了两个方便的工具函数——createForm(config)和bindRedux(config),前者可以当做decorate使用,传入表单的配置,自动为被装饰的组件添加表单相关props;而后者则生成Redux应用相关的reducer、initialState和actionCreate等。
6.2.2 使用Redux-form完成表单的异步验证
在使用和配置方面,与前者没有太多差异,唯一的不同是它需要在Redux应用的state树中挂载一个独立的节点。这意味着,所有使用Redux-form创建的表单中的字段都会在固定的位置。
6.2.3 使用高阶reducer为现有模块引入表单功能
需要用到另一个React-Redux的表单实现——react-redux-form。
6.3 Redux性能优化
6.3.1 Reselect
对于Redux来说,每当store发生改变时,所有connect都会重新计算。为了减少这样带来性能浪费,想到对connect中的这些selector函数做缓存。reselect库中自带了缓存属性。
6.3.2 Immutable Redux
如果要彻底使用不可变数据结构去做整体架构的话,可以尝试使用。
6.3.3 性能优化
由于Redux的可扩展性,可以轻易封装一些针对reducer的性能优化方法。
1. logSlowReducers
在生产环境中,可以使用此函数,它能够筛选出执行时间较高的reducer以及对应的action,从而有针对性地做优化。
2. specialActions
大多数情况下,应用的action都是和某个reducer对应。因此,可以指定特殊的情况,让Redux在特殊情况之外只执行与action对应的那个reducer。
3. batchActions
分发是一个较为复杂的过程。当同步分发多个action时,只想让界面渲染最终的状态而已,中间的状态并不想关系。则可以通过封装把这几个action合并。
6.4 解读Redux
6.4.1 参数归一化
6.4.2 初始状态及getState
6.4.3 subscribe
6.4.4 dispatch
6.4.5 replaceReducer
6.5 解读react-redux
提供react与redux的绑定。
6.5.1 provider
Provider是整个应用最外层的React组件,它接受一个store作为props。
6.5.2 connect
connect函数本身返回名为wrapWithConnect的函数,而整个函数才是真正用来装饰React组件的。而在装饰一个React组件时,其实就是把组件在Connect类的render方法中进行渲染,并获取connect中传入的各种额外数据。
6.5.3 代码热替换
代码热替换功能肯定发生在应用开发过程中,因此首先在最外层有一个对当前环境的判断。若在开发环境,则为connect定义一个componentWillUpdate的生命周期方法,判断当前组件的version是否与全局的version不同,若不同,则更新version并重新执行订阅等操作。