原文发布在我的个人博客 解读只有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