[译]从零开始Redux（三）组合

前言

接上一篇，在了解了状态转移中如何保证不变性之后，我们又来看看如何完成多变量状态的组合。

组合

在我们的项目由简入繁的过程中，针对状态进行组合是个很常见的需求，比方说像我们之前实现的一个待办事项列表的项目，这里面的状态维护的实际上是一个待办事项数组，数组中每个元素包含了待办事项的名称、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}&nbsp;</span>
      }else{
          return <span><a href='#' onClick={(e)=>{e.preventDefault();this.props.onClick(this.props.value)}}>{this.props.children}</a>&nbsp;</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();

接下来我们看看效果：

全部
已完成
未完成