解读只有99行的Redux（三）—— 辅助函数和组合Reducer

时间：2021-04-04 18:23:25

解读只有99行的Redux（三）—— 辅助函数和组合Reducer

原文发布在我的个人博客 解读只有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: []
}
 ```
&emsp;&emsp;而Action Creator呢，则像下面这样
```js
function addTodo(payload) {
    return {
        type: 'ADD_TODO',
        payload
    };
}




<div class="se-preview-section-delimiter"></div>

  看到这里估计大家就明白了，Action Creator就是生成action的工厂函数。

  回到我们的正题，我们来看单数形式的bindActionCreator的实现：

function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args));
}




<div class="se-preview-section-delimiter"></div>

  其返回结果展开是这样的：

function (...args) {
    dispatch(actionCreator(...args));
}




<div class="se-preview-section-delimiter"></div>

  ...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)
    );
}




<div class="se-preview-section-delimiter"></div>

  actionCreators是一个集合对象，包含很多Action Creator函数，不过也可能传入是单个Action Creator。利用mapValues对actionCreators进行对象遍历，在上面这个函数中，mapValues的形参fn实际上是

function (actionCreator) {
    return bindActionCreator(actionCreator, dispatch);
}




<div class="se-preview-section-delimiter"></div>

  每个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)
    );
}




<div class="se-preview-section-delimiter"></div>

  首先对所有的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

标签：

相关文章