前言
接上一篇，在了解了状态转移中如何保证不变性之后，我们又来看看如何完成多变量状态的组合。
组合
在我们的项目由简入繁的过程中，针对状态进行组合是个很常见的需求，比方说像我们之前实现的一个待办事项列表的项目，这里面的状态维护的实际上是一个待办事项数组，数组中每个元素包含了待办事项的名称、id和是否完成状态等等。当我们需要针对状态进行过滤显示的时候（比方说我们可能想在显示全部和显示未完成中切换），我们就需要有一个新的状态来保存我们当前显示的模式。为了完成这一切，我们就需要将这两个变量进行组合形成我们新的状态，而相对应的reducer函数也同样需要组合。
代码实现
最简单的做法肯定是，将这两个变量揉到一个对象中，并重新写一个reducer函数，把这两个变量各自的业务行为逻辑也写到一起，从代码的层面上完成组合。这当然可以做，但是如果每次增加一个新的变量，你都需要修改代码，久而久之这个函数就会非常难以理解和维护，而且，如果你是使用了一个第三方的库，那有怎么办呢？
委托复用实现
其实之前的做法有一半是可取的，即把两个变量揉到一个对象中来完成状态的组合。那么我们想，是不是只有修改原有reducer函数一条路才能够完成我们的需求呢？我们所要的实际上是一个新的reducer函数能够完成根据下发行为完成组合之后的状态对象的转化。原有的函数是否能够通过组合来完成这些呢？答案是肯定的，以代码来说，我们首先完成一个新的针对显示状态的reducer函数：
const reducer = (state = 'SHOW_ALL', action) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state
}
}
export default reducer;
那么我们可以这样来组合一个新的函数：
import reducerTodo from './TodoReducer'
import reducerFilter from './VisibilityFilterReducer'
const todoApp = (state = {}, action) => {
return {
todos: reducerTodo(
state.todos,
action
),
visibilityFilter: reducerFilter(
state.visibilityFilter,
action
)
}
}
可以看到，我们这个新的reducer函数维护一个新的状态对象，它包含两个变量
- todos 就是我们之前的待办事项列表
- visibilityFilter 是这次新加的显示过滤状态
新函数的对状态的具体维护工作其实是委托给了每个变量各自的reducer函数来执行，这个函数只是做了一个逻辑组合的工作，实现了代码的复用和零修改，最大程度的保证了可维护性。
Redux实现
上面的做法已经很接近Redux的实现了，只是Redux提供了一个更简单的函数：combineReducers来解决这个问题，这个函数接受一个对象参数，代码如下：
import {combineReducers} from Redux
const todoApp = combineReducers({
todos: reducerTodo,
visibilityFilter: reducerFilter
})
这段代码得到的todoApp跟上面代码所得的todoApp是等价的，也就是说他们完成相同的功能。维护一个状态对象，这个对象包含一个待办事项列表todos和显示过滤状态visibilityFilter，并且指定了各自的reducer函数。
我们比较好奇的是combineReducers具体做了哪些事情，先来定个架子：
const combineReducers = (reducers) => {
return (state = {}, action) => {
return ...
}
}
我们明确的是，combineReducers函数接受由多个函数组合形成的reducers对象，并返回一个新的reducer函数。这个函数的逻辑是维护一个新的state对象，这个对象每个属性名与reducers对象的属性名一致，并且每个属性的状态转移取值由reducers对象中的同名函数决定。那么我们可以这样实现：
const combineReducers = (reducers) => {
return (state = {}, action) => {
return Object.keys(reducers).reduce(
(nextState, key) => {
nextState[key] = reducers[key](state[key], action)
return nextState
},
{}
)
}
}
这个代码的逻辑是，遍历reducers对象中所有的key值，调用reducers中对应key的函数，入参是state对应key的变量和action，将得到的新的状态值放回到结果对象对应的key值中（这一切都借用了数组的reduce函数，不熟悉的可以先了解一下js中的函数式编程）。
这里就体现出之前文章中所提到的关键两点：
- 每个reduce函数必须有一个自己的初态和default缺省处理逻辑，像上面这个例子，如果我们下发的行为是添加待办事项，那这个行为与过滤显示状态是无交集的，对于显示状态的reducer，这个行为是要触发缺省的行为和初态的。
- 每个reducer函数必须是纯函数，不能有任何副作用并要维护状态的不可变性，如果有一个点打破了这个规则，在组合的情况下，会形成庞大的状态变量引用层级，导致整体状态的不可跟踪。如果所有的reducer都遵守这个规则，那么组合到一起的状态也必将是不可变的。
实战
在了解了组合的原理和实现之后，我们来丰富一下我们的待办事项，首先编写我们的过滤链接组件：
import React, { Component } from 'react';
import './App.css';
class FilterLink extends Component {
constructor(props) {
super(props);
}
render(){
if(this.props.curFilter === this.props.value){
return <span>{this.props.children} </span>
}else{
return <span><a href='#' onClick={(e)=>{e.preventDefault();this.props.onClick(this.props.value)}}>{this.props.children}</a> </span>
}
}
}
export default FilterLink;
接着在待办事项中增加几个选项：
import React, { Component } from 'react';
import './App.css';
import FilterLink from './FilterLink'
class Todo extends Component {
constructor(props) {
super(props);
this.state = {
text:'',
}
}
handleChange(event) {
this.setState({text: event.target.value})
}
render() {
return (
<div>
<input type="text" value={this.state.text} onChange={(e)=>this.handleChange(e)}></input>
<div>
<button onClick={() => this.props.doAdd(this.state.text)}>+</button>
</div>
<ul>
{this.props.todos
.filter(todo => {
switch (this.props.visibilityFilter) {
case 'SHOW_ALL':
return true
case 'SHOW_COMPLETED':
return todo.completed
case 'SHOW_UNCOMPLETED':
return !todo.completed
}
})
.map(todo =>
<li
style={todo.completed?{textDecoration:'line-through'}:{}}
key={todo.id}
onClick={()=>this.props.doToggle(todo.id)}>
{todo.text}
</li>
)}
</ul>
<FilterLink value="SHOW_ALL" onClick={(input)=> this.props.doFilter(input)} curFilter={this.props.visibilityFilter}>All</FilterLink>
<FilterLink value="SHOW_COMPLETED" onClick={(input)=> this.props.doFilter(input)} curFilter={this.props.visibilityFilter}>Completed</FilterLink>
<FilterLink value="SHOW_UNCOMPLETED" onClick={(input)=> this.props.doFilter(input)} curFilter={this.props.visibilityFilter}>Uncompleted</FilterLink>
</div>
);
}
}
export default Todo;
跟之前的文章差别不大，我们增加了三个按钮来修改我们的过滤状态，并且在列表显示部分增加了一个filter操作来过滤我们要显示的事项。
然后就是基础页面：
const todoApp = combineReducers({
todos: reducerTodo,
visibilityFilter: reducerFilter
})
let store = createStore(todoApp);
let idnum = 1;
const render = () =>
ReactDOM.render(<Todo {...store.getState()}
doAdd={(input) => {store.dispatch({type: 'ADD_TODO', id: idnum++, text:input})}}
doToggle={(input) => {store.dispatch({type: 'TOGGLE_TODO', id:input})}}
doFilter={(input) => {store.dispatch({type:'SET_VISIBILITY_FILTER', filter: input})}}
/>, document.getElementById('root'));
store.subscribe(()=> render());
render();
接下来我们看看效果：
全部
已完成
未完成
网友评论