react+redux教程(七)自定义redux中间件
今天,我们要讲解的是自定义redux中间件这个知识点。本节内容非常抽象,特别是中间件的定义原理,那多层的函数嵌套和串联,需要极强逻辑思维能力才能完全消化吸收。不过我会多罗嗦几句,所以不用担心。
例子
例子是官方的例子real-world,做的是一个获取github用户、仓库的程序。
本例子源代码:
https://github.com/lewis617/react-redux-tutorialt/tree/master/redux-examples/real-world
redux中间件就是个嵌套函数
redux中间一共嵌套了三层函数,分别传递了store、next、action这三个参数。
为什么要嵌套函数?为何不在一层函数中传递三个参数,而要在一层函数中传递一个参数,一共传递三层?因为中间件是要多个首尾相连的,对next进行一层层的“加工”,所以next必须独立一层。那么store和action呢?store的话,我们要在中间件顶层放上store,因为我们要用store的dispatch和getState两个方法。action的话,是因为我们封装了这么多层,其实就是为了作出更高级的dispatch方法,但是在高级也是dispatch,是dispatch,就得接受action这个参数。
看我们例子中的代码:
middleware/api.js
// A Redux middleware that interprets actions with CALL_API info specified. // Performs the call and promises when such actions are dispatched. export default store => next => action => { const callAPI = action[CALL_API] if (typeof callAPI === 'undefined') { return next(action) } let { endpoint } = callAPI const { schema, types } = callAPI if (typeof endpoint === 'function') { endpoint = endpoint(store.getState()) } if (typeof endpoint !== 'string') { throw new Error('Specify a string endpoint URL.') } if (!schema) { throw new Error('Specify one of the exported Schemas.') } if (!Array.isArray(types) || types.length !== 3) { throw new Error('Expected an array of three action types.') } if (!types.every(type => typeof type === 'string')) { throw new Error('Expected action types to be strings.') } function actionWith(data) { const finalAction = Object.assign({}, action, data) delete finalAction[CALL_API] return finalAction } const [ requestType, successType, failureType ] = types next(actionWith({ type: requestType })) return callApi(endpoint, schema).then( response => next(actionWith({ response, type: successType })), error => next(actionWith({ type: failureType, error: error.message || 'Something bad happened' })) ) }
例子中,我们用store => next => action =>实现了三层函数嵌套。箭头语法很好的代替了丑陋的function嵌套方法。最后指向的那个{}里面,我们就可以写关于dispatch的装饰了,不过记得返回next,给下一个中间件使用。
中间件的执行
嵌套函数也是函数,是函数就要运行。我们知道,js里面,我们用()来执行一个函数。那么三层嵌套函数我们要怎么执行呢?写三个()呗!aaa()()()就可以了。aaa()返回了一个函数,aaa()()又返回一个函数,aaa()()()终于执行完成。
我们来看下,我们编写的中间件是怎么运行的。首先中间件的使用是在configStore里面的applyMiddleware里面写的。
applyMiddleware(thunk, api)
我们看下redux的源代码:
node_modules/redux/src/applyMiddleware.js
export default function applyMiddleware(...middlewares) { return (createStore) => (reducer, initialState, enhancer) => { var store = createStore(reducer, initialState, enhancer) var dispatch = store.dispatch var chain = [] var middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) } chain = middlewares.map(middleware => middleware(middlewareAPI)) dispatch = compose(...chain)(store.dispatch) return { ...store, dispatch } } }
好短好开心!不过看起来还是挺复杂的,不用担心,不就是个三层嵌套函数嘛,我们先找最外层的执行代码:
chain = middlewares.map(middleware => middleware(middlewareAPI))
middlewares使用展开语法,将我们写进去的中间件,生成一个中间件数组。遍历每个中间件,在中间件最外层执行第一次,也就是参数为store那一次。我们发现store是middlewareAPI。
var middlewareAPI = { getState: store.getState, dispatch: (action) => dispatch(action) }
是个对象,包含了我们需要的两个方法,这就够了。
好了,我们开始寻找第二层函数的执行代码:
dispatch = compose(...chain)(store.dispatch)
这是什么鬼?compose是种函数嵌套的写法,源代码清单就不展示了,我们知道它可以帮我们将嵌套的函数,写成逗号隔开的样子就可以了。有点类似Promise解决回调地狱的做法。都是将嵌套写成平行的样子。
chain就是我们的第二层函数,...就是展开语法,用逗号隔开放进compose参数里。后面那个(store.dispatch)就是入口参数。是个未经任何加工的dispatch,这个可怜的家伙进去后,将被我们的中间件层层加工,经历风雨,变成更加牛逼的dispatch。
第三层函数的执行代码在哪?不在这里面,因为到了第三层函数,就是新的dispatch了,我们要在组件里面使用它,所以第三层函数的执行在组件中。参数是什么?当然是可爱的action啊!
中间件的连接
我们知道,中间件是可以首尾相连使用的,那么我们如何实现首尾相连?答案就在next(),写过express中间件的同学对它一定不陌生。那么redux中间件的next()是个什么鬼?也是个dispatch。
我们写中间件时候,一定要写next(),当前中间件对dispatch加工后返回给后面的中间件继续加工。这也是为什么中间件的顺序有讲究的原因。
解读例子中的中间件的业务流程
中间件的原理讲完了,我们来走一遍例子中的中间件业务流程吧!
获取指定action
我们在定义action的时候,在fetchUser等函数中返回了这些我们需要的东西:
actions/index.js
import { CALL_API, Schemas } from '../middleware/api' export const USER_REQUEST = 'USER_REQUEST' export const USER_SUCCESS = 'USER_SUCCESS' export const USER_FAILURE = 'USER_FAILURE' // Fetches a single user from Github API. // Relies on the custom API middleware defined in ../middleware/api.js. function fetchUser(login) { return { [CALL_API]: { types: [ USER_REQUEST, USER_SUCCESS, USER_FAILURE ], endpoint: `users/${login}`, schema: Schemas.USER } } } // Fetches a single user from Github API unless it is cached. // Relies on Redux Thunk middleware. export function loadUser(login, requiredFields = []) { return (dispatch, getState) => { const user = getState().entities.users[login] if (user && requiredFields.every(key => user.hasOwnProperty(key))) { return null } return dispatch(fetchUser(login)) } }
我们也就是指定这些action来进行“包装的”。除了fetchUser,还有其他的,不列出代码清单了。
我们添加console.log来查看action的真正样子:
console.log('当前执行的action:',action); const callAPI = action[CALL_API]
在执行initRoutes的action时候,我们得到了一个包含Symbol()的action对象,这就是我们想要的action。
Symbol()
Symbol()是什么?就是CALL_API。
middleware/api.js
// Action key that carries API call info interpreted by this Redux middleware. export const CALL_API = Symbol('Call API')
为什么要用symbol,为了不冲突,symbol是个唯一的不变的标识,可以 用于对象的key。为了避免冲突而生,这里也可以用字符串来代替,但是不好,因为字符串很容易命名冲突,你每次都要想个奇葩的长名字,所以还是用 symbol吧。再罗嗦一句,我们写object.assign的时候,第一个参数设为{},第二个参数设为源,第三个参数设为拓展属性的写法,就是为了 兼容包含symbol的对象。
消毒
获取到指定的action后,我们要做一系列的异常处理:
middleware/api.js
if (typeof endpoint === 'function') { endpoint = endpoint(store.getState()) } if (typeof endpoint !== 'string') { throw new Error('Specify a string endpoint URL.') } if (!schema) { throw new Error('Specify one of the exported Schemas.') } if (!Array.isArray(types) || types.length !== 3) { throw new Error('Expected an array of three action types.') } if (!types.every(type => typeof type === 'string')) { throw new Error('Expected action types to be strings.') }
比较简单,不罗嗦了。
执行请求action
获取完action,也进行过消毒了,可以开始ajax请求了,首先发一个请求action
function actionWith(data) { const finalAction = Object.assign({}, action, data) delete finalAction[CALL_API] return finalAction } const [ requestType, successType, failureType ] = types next(actionWith({ type: requestType }))
执行ajax请求,结束后发出成功或者失败action
return callApi(endpoint, schema).then( response => next(actionWith({ response, type: successType })), error => next(actionWith({ type: failureType, error: error.message || 'Something bad happened' })) )
图解流程
本来一个action,经过中间件的加工后,变成了一系列的流程。
教程源代码及目录
如果您觉得本博客教程帮到了您,就赏颗星吧!
https://github.com/lewis617/react-redux-tutorial
react+redux教程(七)自定义redux中间件的更多相关文章
- Scrapy 教程(七)-架构与中间件
Scrapy 使用 Twisted 这个异步框架来处理网络通信,架构清晰,并且包含了各种中间件接口,可以灵活的完成各种需求. Scrapy 架构 其实之前的教程都有涉及,这里再做个系统介绍 Engin ...
- react+redux教程(八)连接数据库的redux程序
前面所有的教程都是解读官方的示例代码,是时候我们自己写个连接数据库的redux程序了! 例子 这个例子代码,是我自己写的程序,一个非常简单的todo,但是包含了redux插件的用法,中间件的用法,连接 ...
- react+redux教程(五)异步、单一state树结构、componentWillReceiveProps
今天,我们要讲解的是异步.单一state树结构.componentWillReceiveProps这三个知识点. 例子 这个例子是官方的例子,主要是从Reddit中请求新闻列表来显示,可以切换reac ...
- react+redux教程(四)undo、devtools、router
上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...
- 【前端】react and redux教程学习实践,浅显易懂的实践学习方法。
前言 前几天,我在博文[前端]一步一步使用webpack+react+scss脚手架重构项目 中搭建了一个react开发环境.然而在实际的开发过程中,或者是在对源码的理解中,感受到react中用的最多 ...
- react+redux教程(二)redux的单一状态树完全替代了react的状态机?
上篇react+redux教程,我们讲解了官方计数器的代码实现,react+redux教程(一).我们发现我们没有用到react组件本身的state,而是通过props来导入数据和操作的. 我们知道r ...
- 【前端,干货】react and redux教程学习实践(二)。
前言 这篇博文接 [前端]react and redux教程学习实践,浅显易懂的实践学习方法. ,上一篇简略的做了一个redux的初级demo,今天深入的学习了一些新的.有用的,可以在生产项目中使用的 ...
- Redux教程3:添加倒计时
前面的教程里面,我们搭建了一个简单红绿灯示例,通过在console输出当面的倒计时时间:由于界面上不能显示倒计时,用户体验并不良好,本节我们就添加一个简单的倒计时改善一下. 作为本系列的最后一篇文章, ...
- Redux教程1:环境搭建,初写Redux
如果将React比喻成士兵的话,你的程序还需要一位将军,去管理士兵(的状态),而Redux恰好是一位好将军,简单高效: 相比起React的学习曲线,Redux的稍微平坦一些:本系列教程,将以" ...
随机推荐
- PHP实现RTX发送消息提醒
RTX是腾讯公司推出的企业级即时通信平台,大多数公司都在使用它,但是我们很多时候需要将自己系统或者产品的一些通知实时推送给RTX,这就需要用到RTX的服务端SDK,建议先去看看RTX的SDK开发文档( ...
- TODO:GitHub创建组织的步骤
TODO:GitHub创建组织的步骤 使用GitHub进行团队合作,写这个步骤主要作用是为了OneTODO作为一个团队组织进行代码的分享,让更多人来参与. 使用帐号.密码登录GitHub 2.右上角加 ...
- 在Sublime Text 3上安装代码格式化插件CodeFormatter
1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...
- 源码分析netty服务器创建过程vs java nio服务器创建
1.Java NIO服务端创建 首先,我们通过一个时序图来看下如何创建一个NIO服务端并启动监听,接收多个客户端的连接,进行消息的异步读写. 示例代码(参考文献[2]): import java.io ...
- 【C#附源码】数据库文档生成工具支持(Excel+Html)
[2015] 很多时候,我们在生成数据库文档时,使用某些工具,可效果总不理想,不是内容不详细,就是表现效果一般般.很多还是word.html的.看着真是别扭.本人习惯用Excel,所以闲暇时,就简单的 ...
- [Egret]优雅的写http
首先,自从使用链式调用的写法后,就一发不可收拾的喜爱上了这种优雅的方式.不管是写架构还是写模块,我都会不自觉的使用这种最优雅的方式.链式写法既减少了代码量,又非常优雅的. 在使用 egret 的htt ...
- PHP设计模式(八)桥接模式(Bridge For PHP)
一.概述 桥接模式:将两个原本不相关的类结合在一起,然后利用两个类中的方法和属性,输出一份新的结果. 二.案例 1.模拟毛笔(转) 需求:现在需要准备三种粗细(大中小),并且有五种颜色的比 如果使用蜡 ...
- 使用DeviceOne实现微信小程序功能
微信小程序即将推出,还没推出就火的不行了.基于微信这个巨大平台,小程序必然能有巨大成功.不过它并不能完全取代App,该开发App还得开发.如果我们自己想实现一个基于自己的APP包含类似微信的小程序功能 ...
- iOS之计算上次日期距离现在多久, 如 xx 小时前、xx 分钟前等
/** * 计算上次日期距离现在多久 * * @param lastTime 上次日期(需要和格式对应) * @param format1 上次日期格式 * @para ...
- TFS 2015 敏捷开发实践 – 看板的使用
看板在现代应用开发过程中使用非常广泛,不管是使用传统的瀑布式开发还是敏捷开发,都可以使用看板管理.因为看板拥有简单的管理方法,直观的显示方式,所以很多软件开发团队选择使用看板进行软件开发管理.本文不在 ...