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

redux

原文发布在我的个人博客 解读只有99行的Redux(三) | 以太空间

一、概述

  slim-redux源码中剩余的其他部分都是一些工具函数,包括mapValuespickbindActionCreatorbindActionCreatorscombineReducers,我们将逐一进行介绍。

二、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函数返回这个新对象。

  假设原来的objfn如下所示:

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。利用mapValuesactionCreators进行对象遍历,在上面这个函数中,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

猜你喜欢

转载自blog.csdn.net/qq_24013171/article/details/80298862