前端技术(二)：从Flux到Redux

什么是Redux？

首先我们要搞清楚，Redux解决了哪些问题？主要是以下3点：

1.如何在应用程序的整个生命周期内维持所有数据？

Redux是一个“状态容器”。写过React或者ReactNative的同学可能会有感受，如果多个页面需要共享数据时，需要把数据一层层地传递下去，非常繁琐。如果能有一个全局统一的地方存储数据，当数据发生变化时自动通知View刷新界面，是不是很美好呢？因此，我们需要一个“状态容器”。

2.如何修改这些数据？

Redux借鉴了分布式计算中的map-reduce的思想，把Store中的数据分割（map）成多个小的对象，通过纯函数修改这些对象，最后再把所有的修改合并（reduce）成一个大的对象。修改数据的纯函数被称为reducer。

3.如何把数据变更传播到整个应用程序？

通过订阅（subscribe）。如果你的View需要跟随数据的变化动态刷新，可以调用subscribe()注册回调函数。在这一点上，Redux是非常粗粒度的，每次只要有新的action被分发，你都会收到通知。显然，你需要对通知进行过滤，这意味着你可能会写很多重复代码。不过，这也是出于通用性和灵活性考虑，实际上Redux不仅可以用于React，也可以用在Vue.js或者Angular上。可以搭配特定框架相关的适配层比如react-redux来规避这些重复代码。

我们来看一下Redux的基本框架：

和前一篇的Flux框架图对比一下可以发现，Redux去除了dispatcher组件（因为只有一个Store），增加了recuder组件（用于更新Store的不同部分）。下面详细介绍各个部分的作用。

4.Redux基本概念

4.1 Store

首先我们需要创建一个全局唯一的Store，Redux提供了辅助函数createStore()：

import { createStore } from 'redux'
var store = createStore(() => {})

你可能注意到了，createStore()需要提供一个参数，这个参数就是reducer。

4.2 Reducer

前面介绍过，reducer就是一个纯函数，输入参数是state和action，输出新的state。一般的代码模板如下：

var reducer = (state = {}, action) => {
  switch (action.type) {
  case 'MY_ACTION': 
    return {...state, message: action.message}
  default:
    return state
  }
}

需要注意的是，default分支一定要返回state，否则会导致状态丢失。

好了，现在我们有了reducer，可以作为参数传递给4.1节中的createStore()函数了。

createStore()只能接受一个reducer参数，如果我们有多个reducer怎么办？这时需要使用另一个辅助函数combineReducers