Redux 的 action 是一个 JS 对象,它表明了如何对 store 进行修改。但是 Redux 的中间件机制使action creator 不光可以返回 action 对象,也可以返回 action 函数, middleware 会拦截自己感兴趣的 action 类型,然后进行某些共性的操作。比如在拉取服务器数据时,如果没有中间件机制,我们可能需要首先请求数据,数据到达后,将数据给 action creator得到一个 action 对象,再 dispatch action;有了redux-promise 中间件后,就可以将数据请求的逻辑直接放在 action creator 中,然后中间件自动拦截Promise类型的 action,等待 action fulfilled 之后,再 dispatch 最终的 action 对象

一、middleware

middleware 相当于是对 store.dispatch()函数的包装,一些针对特定action的处理,或者对所有action都进行的处理放进middleware中进行。

middleware使 action creator 不光可以返回 action 对象,也可以返回 action 函数,因为 middleware 会拦截自己感兴趣的 action ,然后对那个 action 进行某些共性的操作,比如调用 Ajax调用。

middleware可以有多个,每个 middleware 类似以下形式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const oneMiddleware = ({ dispatch, getState} ) => (next) => (action) => {
// 如果不是自己感兴趣的action,则调用之后的中间件
if(typeof action !== "这个中间件感兴趣的action") {
return next(action)
}
// 对这个action进行特殊处理,比如拦截异步操作 (callAPI 是action传进来的)
dispatch(Object.assign({}, payload, {
type: requestType
})) return callAPI().then(
response => dispatch(Object.assign({}, payload, {
response,
type: successType
})),
error => dispatch(Object.assign({}, payload, {
error,
type: failureType
}))
)
}

二、 applyMiddleware 源码解析

下面是redux/lib/index.js中applyMiddleware的源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
function applyMiddleware() {
// 初始化一个 middlewares 数组,里面放所有参数传进来的 middleware
for (var _len = arguments.length, middlewares = Array(_len), _key = 0; _key < _len; _key++) {
middlewares[_key] = arguments[_key];
}
// createStore 在传递第三个参数时,会按下面的语句返回
// return enhancer(createStore)(reducer, preloadedState);
// enhancer在这里就是 applyMiddleware(...middleware) 的返回值
// 之所以是对 createStore 应用 middleware,而不是 store,是为了防止对store重复使用一个middleware
return function (createStore) {
return function () { // 将 createStore 时传入的 reducer 和 preloadedState 放入 args 数组中
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
} // 创建一个 store
var store = createStore.apply(undefined, args);
// 在创建 middleware 时 调用dispatch是不允许的
var _dispatch = function dispatch() {
throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');
}; var middlewareAPI = {
getState: store.getState,
dispatch: function dispatch() {
return _dispatch.apply(undefined, arguments);
}
}; // 将getState和 dispatch作为参数传递给每个 middleware
// chain 函数数组中每个函数都是 (next) => (action) => {...} 形式
// 这里的 dispatch 还是 _dispatch
// 也就是说 middleware,如果像以下形式一样调用了 dispatch 会报错
// const oneMiddleware = ({dispatch, getState}) => {
// diapatch(someAction(...)) // 在这里调用dispatch,调用的其实是 _dispatch,会报错
// return (next) => (action) => {
// ....
// }
// }
// 之所以不让在创建时刻调用dispatch,是因为这时的 dispatch 就是 createStore产生的 dispatch,这是如果调用 dispatch 会导致没有任何 middleware 被应用,那就没有意义了
var chain = middlewares.map(function (middleware) {
return middleware(middlewareAPI);
}); _dispatch = compose.apply(undefined, chain)(store.dispatch); // 替换 store 的 dispatch
return _extends({}, store, {
dispatch: _dispatch
});
};
};
}

总结三个要点:

  • 当使用了applyMiddleware时,实际是applyMiddleware(...middleware)(createStore)(reducers, preloadedState)这样的调用方式。将 createStore 作为参数传入,而不是直接对 store 应用middleware,主要是为了防止对 store 引用多次相同的middleware
  • 不能在创建时刻调用dispatch,因为这时如果非要调用 dispatch,那么只能调用 createStore 的 dispatch,不会经过 middleware。所以源码在这步干脆就把 dispatch 替换成了一个会抛出错误的函数。
  • 使用 compose 函数将多个 middleware 变为一层包一层的洋葱式的执行方式,洋葱的核心是 createStore 的 dispatch

下面是compose函数的源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
大专栏  理解 Redux 中间件机制">21
22
23
// compose.apply(undefined, chain)(store.dispatch);
function compose() {
// 将chain 函数数组都copy到新的 funcs数组
for (var _len = arguments.length, funcs = Array(_len), _key = 0; _key < _len; _key++) {
funcs[_key] = arguments[_key];
}
// 如果没有 middleware,则返回的dispatch函数就是 createStore 的 dispatch,相当于没做任何处理
if (funcs.length === 0) {
return function (arg) {
return arg;
};
}
// 如果只有一个 middleware,则直接返回那个 middleware
if (funcs.length === 1) {
return funcs[0];
}
// 对数组中的每个元素(从左到右)应用某个函数
return funcs.reduce(function (a, b) {
return function () {
return a(b.apply(undefined, arguments));
};
});
}

这里有两个要点:

  • compose 函数返回的是一个以 store.dispatch 函数为参数的函数,这步就是为洋葱式的执行结构填上核心
  • compose 函数的核心是 Array.prototype.reduce 的应用,它的作用是对数组中的每个元素(从左到右)应用某个函数,最后返回一个结果

reduce 函数具体可以看下面的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const chain1 = (next) => (action) => {
console.log('before action1');
const returnedvalue = next(action);
console.log('after action1');
return returnedvalue;
} const chain2 = (next) => (action) => {
console.log('before action2');
const returnedvalue = next(action);
console.log('after action2');
return returnedvalue;
} const func = [chain1, chain2]; const newFunc = func.reduce((a, b) => {
return function () {
console.log(arguments);
return a(b.apply(undefined, arguments))
}
}) const dispatch = (action) => {
console.log('this is dispatch');
return 'final result'
} const lastFunc = newFunc(dispatch) console.log(lastFunc({ type: 'some action' })); // { '0': [Function: dispatch] }
// before action1
// before action2
// this is dispatch
// after action2
// after action1
// final result

总之最后 applyMiddleware函数最后返回的是一个 dispatch 被 middleware 包裹后的 store。这样当dispatch 一个 action时,action会先通过每个 middleware,middleware 可以根据 action的内容或者类型(比如是否为function)等信息来拦截自己感兴趣的 action,然后再对这个 action 特殊处理。

三、 redux-promise 源码解读

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function promiseMiddleware(_ref) {
var dispatch = _ref.dispatch;
// dispatch(); // 这个语句会报错
return function (next) {
return function (action) {
if (!_fluxStandardAction.isFSA(action)) {
return isPromise(action) ? action.then(dispatch) : next(action);
} return isPromise(action.payload) ? action.payload.then(function (result) {
console.log(dispatch.toString());
return dispatch(_extends({}, action, { payload: result }));
}, function (error) {
return dispatch(_extends({}, action, { payload: error, error: true }));
}) : next(action);
};
};
}

以上就是 redux-promise 的源码,它会拦截是 Promise 对象 或者 payload 属性是promise 对象的action。看上去还是非常简单的。

但是这里有一个要点,就是在 applyMiddleware 中,有一个用 middleware 函数数组 构建 chain 函数数组的过程,为了防止 middleware 在构建过程中调用 dispatch ,它传递的 dispatch 函数,函数体是这样的

1
2
3
4
5
6
7
8
9
10
var _dispatch = function dispatch() {
throw new Error('Dispatching while constructing your middleware is not allowed. ' + 'Other middleware would not be applied to this dispatch.');
}; var middlewareAPI = {
getState: store.getState,
dispatch: function dispatch() {
return _dispatch.apply(undefined, arguments);
}
};

==那么为什么在构建时,middleware 调用 dispatch 会出错,在构建之后 middleware 调用 dispatch 不会出错呢?==

我们知道函数是引用传递的,所以说在 promiseMiddleware中的 var dispatch = _ref.dispatch 中存储的是

1
2
3
function dispatch() {
return _dispatch.apply(undefined, arguments);
}

这个函数的引用,而在构建过程时,一调用 dispatch 函数,就会调用 _dispatch 函数,然后就报错了。

但是 applyMiddleware 在构建完成后有这样一步操作

1
_dispatch = compose.apply(undefined, chain)(store.dispatch);

这样就覆盖了之前的只会报错的 _dispatch,从而在 middleware 中可以正常的调用 dispatch了。

另外从上面可以看出,==在 middleware 中调用的 dispatch 不是 createStore 的 dispatch,而是经过 middleware 包装的 dispatch==。

上一篇:模块加载原理与 module 源码阅读

下一篇:ES6 之 Symbol

理解 Redux 中间件机制的更多相关文章

  1. 3.3 理解 Redux 中间件(转)

    这一小节会讲解 redux 中间件的原理,为下一节讲解 redux 异步 action 做铺垫,主要内容为: Redux 中间件是什么 使用 Redux 中间件 logger 中间件结构分析 appl ...

  2. redux深入理解之中间件(middleware)

    理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...

  3. 理解 Redux 的中间件

    将该思想抽象出来,其实和 Redux 就无关了.问题变成,怎样实现在截获函数的执行,以在其执行前后添加自己的逻辑. 为了演示,我们准备如下的示例代码来模拟 Redux dispatch action ...

  4. DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能

    DDD实践案例:引入事件驱动与中间件机制来实现后台管理功能 一.引言 在当前的电子商务平台中,用户下完订单之后,然后店家会在后台看到客户下的订单,然后店家可以对客户的订单进行发货操作.此时客户会在自己 ...

  5. 【React全家桶入门之十三】Redux中间件与异步action

    在上一篇中我们了解到,更新Redux中状态的流程是这种:action -> reducer -> new state. 文中也讲到.action是一个普通的javascript对象.red ...

  6. 理解Redux以及如何在项目中的使用

    今天我们来聊聊Redux,这篇文章是一个进阶的文章,建议大家先对redux的基础有一定的了解,在这里给大家推荐一下阮一峰老师的文章: http://www.ruanyifeng.com/blog/20 ...

  7. 通俗易懂的理解 Redux(知乎)

    1. React有props和state: props意味着父级分发下来的属性[父组件的state传递给子组件  子组件使用props获取],state意味着组件内部可以自行管理的状态,并且整个Rea ...

  8. Redux 中间件与函数式编程

    为什么需要中间件 接触过 Express 的同学对"中间件"这个名词应该并不陌生.在 Express 中,中间件就是一些用于定制对特定请求的处理过程的函数.作为中间件的函数是相互独 ...

  9. Redux:中间件

    redux中间件概念 比较容易理解. 在使用redux时,改变store state的一个固定套路是调用store.dispatch(action)方法,将action送到reducer中. 所谓中间 ...

随机推荐

  1. openvino资源

    Intel OpenVINO介紹及樹莓派.Linux的安裝 https://chtseng.wordpress.com/2019/01/21/intel-openvino%E4%BB%8B%E7%B4 ...

  2. 游程编码run length code

    今天突然看到一个名词,游程编码.也叫行程编码. 简单理解就是,几个相同连续的字符,然后用数字统计表示. 举个例子: aaaabbbccc 用游程编码的表示就是4a3b3c 如果:连续字符只有一个 那么 ...

  3. eclipse创建文件携带作者时间

    windows–>preference Java–>Code Style–>Code Templates code–>new Java files 编辑它 ${filecomm ...

  4. Java的各类型数据在内存中分配情况详解

    1.      有这样一种说法,如今争锋于IT战场的两大势力,MS一族偏重于底层实现,Java一族偏重于系统架构.说法根据无从考证,但从两大势力各自的社区力量和图书市场已有佳作不难看出,此说法不虚,但 ...

  5. SQL触发器笔记

    触发器(Trigger)是在对表进行插入.更新.删除等操作时自动执行的存储过程. 触发器是一种特殊的存储过程,它在执行语言事件时自动生效,采用事件驱动机制.当某个触发事件发生时,定义在触发器中的功能将 ...

  6. UML-各阶段如何编写用例

    1.前文回顾 用例的根本价值:发现谁是关键参与者,他要实现什么目标? 需求分类,见<进化式需求>:制品,见<初始不是需求阶段>中的表4-1 2.各阶段编写何种用例,均针对下图展 ...

  7. centos 7 安装及配置vsftpd

    一.防火墙开放21端口 二.创建FTP用户,创建完用户后在/etc/passwd里是这样呈现的:ftpuser:x:1008:1008::/var/www/html:/sbin/nologin 三.y ...

  8. 吴裕雄--天生自然C语言开发:typedef

    #include <stdio.h> #include <string.h> typedef struct Books { ]; ]; ]; int book_id; } Bo ...

  9. sklearn包源码分析(二)——ensemble(未完成)

    网络资源 sklearn包tree模型importance解析

  10. linux系统用户管理(二)

    5.组命令管理**组账户信息保存在/etc/group和/etc/gshadow两个文件中 /etc/group 组账户信息 [root@localhost ~]# head -2 /etc/grou ...