深入浅出React+Redux（四：Redux - 组件的Context）

前言

对于工作遇到些不开心的事，我也只能说，运气不好吧，算了不提，React这东西是不难，搭个状态处理，真的是什么一下子维护很多文件夹。

不过，vue还真是出了名简单，上手难度就在vuex api哪里。其他真的是把ng整个组件传值，模板语言拿过来，换汤不换药。

（一）Redux 特点

Redux顾名思义（Reducer+Flux）

---

1. 唯一数据源

唯一数据源指的是应用的状态数据应该只存储在唯一的一个 Store 上 。
我们已经知道，在 Flux 中，应用可以拥有多个 Store ，往往根据功能把应用的状态数据划分给若干个 Store 分别存储管理 。

如果状态数据分散在多个 Store 中，容易造成数据冗余，这样数据一致性方面就会出问题 。 虽然利用 Dispatcher 的 waitFor 方法可以保证多个 Store 之间的更新顺序，但是这又产生了不同 Store 之间的显示依赖关系，这种依赖关系的存在增加了应用的复杂度，容
易带来新的问题。

---

2.保持状态只读

保持状态只读，就是说不能去直接修改状态，要修改 Store 的状态，必须要通过派发一个 action 对象完成，这一点 ，和 Flux 的要求并没有什么区别 。

---

3. 数据改变只能通过纯函数完成

Reducer 不是一个 Redux 特定的术语，就以 JavaScript 为例，在ES5的数组高阶API

---

ES5, ES6 常用数组API请参考下面

ES5数组API

ES6数组API

---

[1, 2 , 3 , 4] .reduce(function reducer(previousValue, currentValue) {
   
    return previousValue+ currentValue
} , 1);

reduce最后一个为默认参数, 如果不设置就将数组第一个为默认值。

在 Redux 中， 每个 reducer 的函数签名如下所示 ：

reducer(state , action)

第一个参数 state 是当前的状态，第二个参数 action 是接收到的 action 对象，而 reducer函数要做的事情，就是根据 state 和 action 的值产生一个新的对象返回，注意 reducer 必须是纯函数，也就是说函数的返回结果必须完全由参数 state 和 action 决定，而且不产生任何副作用，也不能修改参数 state 和 action 对象。

比对Flux和Redux处理Store的差别

CounterStore.dispatchToken = AppDispatcher.register((action ) => {
  if (action.type === ActionTypes .INCREMENT) {
        counterValues[action.counterCaption) ++;
        CounterStore.emitChange() ;
   } else if (action.type === ActionTypes.DECREMENT) {
        counterValues[action.counterCaption]
        CounterStore.emitChange() ;
   }
});

Flux 更新状态的函数只有一个参数 action ，因为状态是由 Store 直接管理的，所以
处理函数中会看到代码直接更新 state ；

在 Redux 中，一个实现同样功能的 reducer 代码
如下：

function reducer(state , action) => {
    const {counterCaption} = action;
    switch (action.type) {
        case Act