参考资料：《深入React技术栈》
高阶reducer
高阶函数是指将函数作为参数或返回值的函数，高阶reducer就是指将reducer作为参数或返回值的函数。
在Redux架构中，reducer是一个纯函数，它的职责是根据previousState和action计算出新的state。在复杂应用中，Redux提供的combineReducers让我们可以把顶层的reducer拆分成多个小的reducer，分别独立地操作state树的不同部分。而在一个应用中，很多小粒度的reducer往往有很多重复的逻辑，那么对于这些reducer，如何抽取公共逻辑，减少代码冗余呢？这种情况下，使用高阶reducer是一种较好的解决方案。
reducer复用
我们将顶层的reduce拆分成多个小的reducer，肯定会碰到reducer复用问题。例如有A和B两个模块，它们的UI部分相似，此时可以通过配置不同的props来区别它们。那么这种情况下，A和B模块能不能共用一个reducer呢？答案是否定的。我们先来看一个简单reducer：
const LOAD_DATA = 'LOAD_DATA';
const initialState = { ... };
function loadData() {
return {
type: LOAD_DATA,
...
};
}
function reducer(state = initialState, action) {
switch(action.type) {
case LOAD_DATA:
return {
...state,
data: action.payload
};
default:
return state;
}
}如果我们将这个reducer绑定到A和B两个不同模块，造成的问题将会是，当A模块调用loadData来分发相应的action时，A和B的reducer都会处理这个action，然后A和B的内容就完全一致了。
这里我们必需意识到，在一个应用中，不同模块间的actionType必须是全局唯一的。
因此，要解决actionType唯一的问题，还有一个方法就是通过添加前缀的方式来做到：
function generateReducer(prefix, state) {
const LOAD_DATA = prefix + 'LOAD_DATA';
const initialState = { ...state, ...};
return function reducer(state = initialState, action) {
switch(action.type) {
case LOAD_DATA:
return {
...state,
data: action.payload
};
default:
return state;
}
}
}这样只要A和B模块分别调用generateReducer来生成相应的reducer，就能解决reducer复用的问题了。而对于prefix，我们可以根据自己的项目结构来决定，例如${页面名称}_${模块名称}。只要能够保证全局唯一性，就可以写成一种前缀。
reducer增强
除了解决复用问题，高阶reducer的另一个重要作用就是对原始的reducer进行增强。redux-undo就是典型的利用高阶reducer来增强reducer的例子，它主要作用是使任意reducer变成可以执行撤销和重做的全新reducer。我们来看看它的核心代码实现：
function undoable(reducer) {
const initialState = {
// 记录过去的state
past: [],
// 以一个空的action调用reducer来产生当前值的初始值
present: reducer(undefined, {}),
// 记录后续的state
future: []
};
return function(state = initialState, action) {
const { past, present, future } = state;
switch(action.type) {
case '@@redux-undo/UNDO':
const previous = past[past.length - 1];
const newPast = past.slice(0, past.length - 1);
return {
past: newPast,
present: previous,
future: [ present, ...future ]
};
case '@@redux-undo/REDO':
const next = future[0];
const newFuture = future.slice(1);
return {
past: [ ...past, present ],
present: next,
future: newFuture
};
default:
// 将其他action委托给原始的reducer处理
const newPresent = reducer(present, action);
if(present === newPresent) {
return state;
}
return {
past: [ ...past, present ],
present: newPresent,
future: []
};
}
};
}有了这高阶reducer，就可以对任意一个reducer进行封装：
import { createStore } from 'redux';
function todos(state = [], action) {
switch(action.type) {
case: 'ADD_TODO':
// ...
}
}
const undoableTodos = undoable(todos);
const store = createStore(undoableTodos);
store.dispatch({
type: 'ADD_TODO',
text: 'Use Redux'
});
store.dispatch({
type: 'ADD_TODO',
text: 'Implement Undo'
});
store.dispatch({
type: '@@redux-undo/UNDO'
});查看高阶reducer undoable的实现代码可以发现，高阶reducer主要通过下面3点来增强reducer：
- 能够处理额外的action;
- 能够维护更多的state;
- 将不能处理的action委托给原始reducer处理。
Redux与表单
React单向绑定的特性极大地提升了应用的执行效率，但是相比于简单易用的双向绑定，单向绑定在处理表单等交互的时候着实有些力不从心。具体到React应用中，单向绑定意味着你需要手动给每个表单控件提供onChange回调函数，同时需要将它们的状态初始化在this.state中。不仅如此，一个体验友好的表单还需要有明确的错误状态和错误信息，甚至某些输入项还需要异步校验功能。也就是说，表单里的一个有效字段至少需要2~3个本地状态。
在Angular.js中，表单相关的问题在框架层面已经得到了很好的解决。那么，对于React+Redux应用，有没有什么好的方案呢？
下面我们从两个层面来解答这个问题：对于简单的表单应用，为了减少重复冗余的代码，可以使用redux-form-utils这个工具库，它能利用高阶组件的特性为表单的每个字段提供value和onChange等必须值，而无需你手动创建；对于复杂的表单，则可以利用redux-form。虽然同样基于高阶组件的原理，但如果说redux-form-utils是一把水果刀的话，那么redux-form就是一把多功能的瑞士军刀。除了提供表单必须的字段外，redux-form还能实现表单同步验证、异步验证甚至嵌套表单等复杂功能。
使用redux-form-utils减少创建表单的冗余代码
了解redux-form-utils之前，先来看看如何使用原生React处理表单：
import React, { Component } from 'react';
class Form extends Component {
constructor(props) {
super(props);
this.handleChangeAddress = this.handleChangeAddress.bind(this);
this.handleChangeGender = this.handleChangeGender.bind(this);
this.state = {
name: '',
address: '',
gender: ''
};
}
handleChangeName(e) {
this.setState({
name: e.target.value
});
}
handleChangeAddress(e) {
this.setState({
address: e.target.value
});
}
handleChangeGender(e) {
this.setState({
gender: e.target.value
});
}
render() {
const { name, address, gender } = this.state;
return (
<form className="form">
<input name="name" value={name} onChange={this.handleChangeName} />
<input name="address" value={address} onChange={this.handleChangeAddress} />
<select name="gender" value={gender} onChange={this.handleChangeGender}>
<option value="male" />
<option value="female" />
</select>
</form>
);
};
}可以看到，虽然我们的表单里只有3个字段，但是已经有非常多的冗余代码。如果还需要加上验证等功能，那么这个表单对应的处理代码将会更加膨胀。
仔细分析表单的代码实现，我们发现几乎所有的onChange处理器逻辑都很类似，只是需要改变表单字段即可。对于某些复杂的输入控件，比如自己封装了一个TimePicker组件，也许回调名称不是onChange，而是onSelect。同样，onSelect回调里提供的参数也许并不是React的合成事件，而是一个具体的值。通过分析表单控件可能的输入和输出，我们将通过使用redux-form-utils减少Redux处理表单应用时的冗余代码：
// components/MyForm.js
import React, { Component } from 'react';
import { createForm } from 'redux-form-utils';
@createForm({
form: 'my-form',
fields: ['name', 'address', 'gender']
})
class Form extends Component {
render(){
const { name, address, gender } = this.props.fields;
return (
<form className="form">
<input name="name" value={...name} />
<input name="address" value={...address} />
<select {...gender}>
<option value="male" />
<option value="female" />
</select>
</form>
);
}
}可以看到，实现同样功能的表单，代码量减少了近一半以上。
redux-form-utils提供了两个方便的工具函数—createForm(config)和bindRedux(config)，前者可以当作decorate使用，传入表单的配置，自动为被装饰的组件添加表单相关的props；而后者可以生成与Redux应用相关的reducer、initialState和actionCreator等。
下面先看看如何在reducer里整合redux-form-utils：
// reducer/MyForm.js
import { bindRedux } from 'redux-form-utils';
const { state: formState, reducer: formReducer } = bindRedux({
form: 'my-form',
fields: ['name', 'address', 'gender'],
});
const initialState = {
foo: 1,
bar: 2,
...formState
};
function myReducer(state = initialState, action) {
switch(action.type) {
case 'MY_ACTION': {
// ...
}
default:
return formReducer(state, action);
}
}我们把同样的配置传给bindRedux方法，并获得这个表单对应的reducer和初始状态formState，并将这些内容整合在reducer中。
完成createForm和bindRedux这两个函数后，一个基于Redux的表单应用就完成了。为了后续修改表单更加灵活，建议将配置文件单独保存，并分别在组件和reducer中引入对应的配置文件。
使用redux-form完成表单异步验证
redux-form-utils为我们提供了实现表单最基本的功能，但是为了填写表单的体验更加友好，在把数据提交到服务端之前，我们应该做一些基本的表单校验，比如填写字段不能为空等。要实现校验等复杂的表单功能，需要用到redux-form。
在使用和配置方面，redux-form与redux-form-utils没有太多的差异，唯一不同的是redux-form需要在Redux应用的state树中挂载一个独立的节点。这意味着，所有使用redux-form创建的表单中的字段都会在一个固定的位置，如state.form.myForm或state.form.myOtherForm均挂载在state.form下:
import { createStore, combineReducers } from 'redux';
import { reducer as formReducer } from 'redux-form';
const reducers = {
// 其他的reducer...
// 所有表单相关的reducer挂载在form下
form: formReducer
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);完成了基本的配置后，现在看看redux-form如何帮我们完成表单验证功能：
import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
function validate(values) {
if(values.name == null || values.name === '') {
return {
name: '请填写名称'
};
}
}
@reduxForm({
form: 'my-form',
fields: ['name', 'address', 'gender'],
validate
});
class Form extends Component {
render(){
const { name, address, gender } = this.props.fields;
return (
<form className="form">
<input name="name" value={...name} />
{ name.error && <span>{name.error}</span> }
<input name="address" value={...address} />
<select {...gender}>
<option value="male" />
<option value="female" />
</select>
<button type="submit">提交</button>
</form>
);
}
}在上面的表单中，我们在提交时对name字段做了非空验证，而在Form组件的render方法中，同时添加了显示相应错误的逻辑。触发验证、重新渲染、表单纯洁性判断等过程，均被redux-form进行了封装，对使用者透明。
可以看到，使用redux-form校验表单十分简单易用，从很大程度上填补了Redux应用在框架层面处理表单应用的不足。
参考资料：《深入React技术栈》
