redux
原文发布在我的个人博客 解读只有99行的Redux（三） | 以太空间
一、概述
slim-redux源码中剩余的其他部分都是一些工具函数，包括mapValues、pick、bindActionCreator、bindActionCreators、combineReducers，我们将逐一进行介绍。
二、mapValues解读
这个函数顾名思义，就是进行一个类似数组map方法的处理。
相关代码如下
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
mapValues函数会接受两个参数，第一个是一个对象，第二个是处理函数。mapValues会对所接受的对象参数obj进行遍历，将每一个键值用fn进行处理，然后将这个结果作为值，原来的键作为键存放到一个新的对象里，最后mapValues会返回这个新对象。
我们来举个例子：
假设原来的obj和fn是这样的
const obj = {
a: 1,
b: 2,
c: 3
};
const fn = (value, key) => {
return value + key;
};
经过mapValues函数处理后，返回的新对象变成了这个样子
{
a: 'a1',
b: 'b2',
c: 'c3'
}
三、pick解读
相关代码如下：
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
result[key] = obj[key];
}
return result;
}, {});
}
pick函数与mapValues函数有些类似，不过看起来更复杂一点，但是实现的操作其实很简单，就是对一个对象obj的每个键值对进行筛选，如果其中的值满足fn函数所规定的条件，把这个键值对放到新对象里，最终pick函数返回这个新对象。
假设原来的obj和fn如下所示：
const obj = {
a: 1,
b: 3,
c: 5
};
const fn = arg => {
return arg < 5;
};
经过pick函数处理后，返回的新对象是这样的：
{
a: 1,
b: 3
}
四、bindActionCreators解读
要想理解这个函数，我们首先得知道Action Creator是什么东西。
一个比较简单的action就像下面这样
{
type: 'ADD_TODO',
payload: []
}
而Action Creator呢，则像下面这样
function addTodo(payload) {
return {
type: 'ADD_TODO',
payload
};
}
看到这里估计大家就明白了，Action Creator就是生成action的工厂函数。
回到我们的正题，我们来看单数形式的bindActionCreator的实现：
function bindActionCreator(actionCreator, dispatch) {
return (...args) => dispatch(actionCreator(...args));
}
其返回结果展开是这样的：
function (...args) {
dispatch(actionCreator(...args));
}
...args就是数据的payload部分，利用actionCreator生成的action去触发dispatch。看到这里你可能会有疑惑，这个单数形式的bindActionCreator有什么作用呢，不要着急，我们接着往下看。
复数形式的bindActionCreators实现如下：
export function bindActionCreators(actionCreators, dispatch) {
return typeof actionCreators === 'function' ?
bindActionCreator(actionCreators, dispatch) :
mapValues(actionCreators, actionCreator =>
bindActionCreator(actionCreator, dispatch)
);
}
actionCreators是一个集合对象，包含很多Action Creator函数，不过也可能传入是单个Action Creator。利用mapValues对actionCreators进行对象遍历，在上面这个函数中，mapValues的形参fn实际上是
function (actionCreator) {
return bindActionCreator(actionCreator, dispatch);
}
每个Action Creator经过bindActionCreator(actionCreator, dispatch)这样的处理，最后bindActionCreators返回的新集合里面每一个都是经过处理的新Action Creator。
总结起来，bindActionCreators，是通过dispatch将action包裹起来，这样可以通过bindActionCreators创建的方法，直接调用dispatch(action)(隐式调用）。
一般情况下，我们可以通过Provider将store通过React的connext属性向下传递，bindActionCreators的唯一用处就是需要传递action creater到子组件，并且改子组件并没有接收到父组件上传递的store和dispatch。
不过因为我们一般都习惯使用react-redux，这个bindActionCreators函数用到的很少。
五、combineReducers解读
这个combineReducers用到的比较多，主要是在做reducer模块化的时候，单个reducer文件都很大，我们又不可能把所有的reducer都写到同一个文件里，所以这时候用combineReducers来把将所有的小reducer组合成一个大的reducer。
首先show the code，combineReducers源码实现：
export function combineReducers(reducers) {
var finalReducers = pick(reducers, (val) => typeof val === 'function');
return (state = {}, action) => mapValues(finalReducers,
(reducer, key) => reducer(state[key], action)
);
}
首先对所有的reducer做一个检查，要是某个reducer不是函数的话，就把它去掉。
combineReducers的返回结果是这样形式的：
function (state = {}, acction) {
return mapValues(finalReducers,
(reducer, key) => reducer(state[key], action)
);
}
从上面这段代码我们可以知道，combineReducers并不是真的把所有X小reducer结合在了一块，而是使得以后每次触发大的reducer，其内部会挨个遍历每个小reducer，再将结果组合起来。
以下是解读只有99行的Redux系列的其他两篇文章
解读只有99行的Redux（一） 从创建一个store开始
解读只有99行的Redux（二） 辅助函数和组合Reducer
网友评论