浅谈对于react-thunk中间件的简单理解
前言
刚来公司的时候,对react项目中的thunk中间件的作用一直不太了解,最近有时间决定好好研究一下。鉴于本人初次写博客,并已假设读者已掌握redux的一些基本用法;如有错误,还望指出。不胜感激!
首先简单回顾一下redux工作流程
图画的不太好,见谅;
对于reactui组件来说,数据的来源无外乎两种,一种是用户主动触发的动作,例如点击事件、提交表单,输入操作;另一种是组件主动的数据更新,如获取页面初始数据,子组件接受父组件的props变化而进行更新视图操作;
如图所示,无论那种对于数据的操作,对于view都会派发出一个action
状态的更新
正如我们所知,在redux里,每次更新后的store都会对应着一个新的view,而store里面数据的更新依赖action的触发————store.dispatch(action)会自执行初始化中createstore中注入的reducers,从而计算出新的状态。
import { createstore } from 'redux' //reducer 计算状态的纯函数 //initialstate 初始化数据 //enhancers中间件 createstore(reducers, initialstate, enhancers)
action的使用和插件的扩展
对于组件的输入操作(如点击事件),可以将store.dispatch(action)绑定到组件
const store = createstore(reducer); const todolist = ({ state, someactioncreator }) => ( <ul> {state.map(somestate => <todo key={somestate.somedata} onclick={() => store.dispatch(someactioncreator(state.somedata))} /> </ul> )
或者通过connect方法,从组件的props中拿到dispatch方法,发出一个action
// 将state注入到组件的props里 // 注意,这里的state指的是redux管理的数据,每一个view的状态对应着 // 唯一的state; // state的集合就是redux管理的store const mapstatetoprops = store => ({ state: store.state }) // 将action注入到组件的props 里 const mapdispatchtoprops = dispatch => ({ actions: state => dispatch(actioncreators(state)) }) export default connect( mapstatetoprops, mapdispatchtoprops )(todolist)
然后组件绑定事件就可以改成这样 ,( actioncreators用于生成action, 参考官方链接 )
const todolist = ({ state, actions }) => ( `<ul> {state.map(somestate => <todo key={somestate.somedata} onclick={() => actions(somestate.somedata)} /> </ul>` )
那么问题来了,dispatch是同步执行reducers生成新状态的,对于页面的操作没有问题;但是如果点击事件是请求了某个结果,需要等待结果响应后再更新视图呢?应该如何处理?
因而redux引入了thunk中间件,对action进行了扩展
##thunk中间件解决了什么问题?
引入thunk插件后,我们可以在actioncreators内部编写逻辑,处理请求结果。而不只是单纯的返回一个action对象。
//未引入前的写法 let nexttodoid = 0 export const addtodo = text => ({ type: 'add_todo', id: nexttodoid++, text }) //引入thunk后 let nexttodoid = 0 export const addtodo = text => ({ return async dispatch => { //dosomething, request await request() dispatch({ type: 'add_todo', id: nexttodoid++, text }) } })
thunk中间件的使用方法
import { applymiddleware, createstore } from 'redux'; import thunk from 'redux-thunk'; const store = createstore( reducer, applymiddleware(thunk) );
createstore其实可以接受三个参数,第二个参数preloadedstate一般作为整个应用的初始化数据,如果传入了这个参数,applymiddleware就会被当做第三个参数处理
const store = createstore( reducer, initialstate, applymiddleware(thunk) );
中间件都要放到applymiddleware里,如果要添加中间件,可以依次添加,但是要遵循文档定义的顺序
const store = createstore( reducer, initialstate, applymiddleware(thunk,middleware1, middleware2) );
源码解读
也许你会奇怪,为什么使用的时候要按照上面的写法,那我们就一起看下方法的实现
首先是createstore的参数顺序
function createstore(reducer, preloadedstate, enhancer) { var _ref2; if (typeof preloadedstate === 'function' && typeof enhancer === 'undefined') { enhancer = preloadedstate; preloadedstate = undefined; } if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { throw new error('expected the enhancer to be a function.'); } return enhancer(createstore)(reducer, preloadedstate); } if (typeof reducer !== 'function') { throw new error('expected the reducer to be a function.'); }
第一个判断已经告诉了我们答案,参数的类型检验结果决定了顺序
applymiddleware是干什么用的 function applymiddleware() { for (var _len = arguments.length, middlewares = array(_len), _key = 0; _key < _len; _key++) { middlewares[_key] = arguments[_key]; } return function (createstore) { return function () { for (var _len2 = arguments.length, args = array(_len2), _key2 = 0; _key2 < _len2; _key2++) { args[_key2] = arguments[_key2]; } var store = createstore.apply(undefined, args); 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); } }; var chain = middlewares.map(function (middleware) { return middleware(middlewareapi); }); _dispatch = compose.apply(undefined, chain)(store.dispatch); return _extends({}, store, { dispatch: _dispatch }); }; }; }
代码不多,而且非常清晰:
1、applymiddleware顾名思义,用于调用各种中间件;
2、applymiddleware执行后,将所有入参中间件存入一个数组,并且返回一个闭包(闭包的概念不做累述)
3、闭包接受一个createstore作为入参并且执行后返回下一个闭包,createstore这个入参有没有很眼熟,没错,就是redux的createstore。
返回结果
返回将所有中间件串联存入的dispatch,执行时从右向左执行,第一次的执行结果会返回给一下个,依次类推。
如何实现每个中间件串联执行
_dispatch = compose.apply(undefined, chain),使用了一个compose函数,调用之后就可以将所有中间件串联起来,那么compose又是如何实现的呢?
精华所在
function compose() { for (var _len = arguments.length, funcs = array(_len), _key = 0; _key < _len; _key++) { funcs[_key] = arguments[_key]; } if (funcs.length === 0) { return function (arg) { return arg; }; } if (funcs.length === 1) { return funcs[0]; } return funcs.reduce(function (a, b) { return function () { return a(b.apply(undefined, arguments)); }; }); }
个人认为这个compose函数是整个redux中非常亮眼的部分,短短几行代码,就完成了一个核心功能的扩展,是责任链设计模式的经典体现。
also 我们也可以使用这个compose方法对applymiddleware进行扩展
let devtools = () => noop => { console.log(noop); return noop; //createstore }; const enhancers = [ applymiddleware(...middleware), devtools() ]; createstore(reducers, initialstate, compose(...enhancers));
然后回来,我们就明白了createstore中的设计
//如果存在中间件参数,那么将会得到一个经过改装的dispatch // return _extends({}, store, {dispatch: _dispatch}); if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { throw new error('expected the enhancer to be a function.'); } return enhancer(createstore)(reducer, preloadedstate); }
dispatch经过了怎样的改装
如上已经说过,compose会将传入的函数数组从右向左串联执行
compose.apply(undefined, chain)(store.dispatch);
thunk一定会接受上一个中间件的执行结果继续执行,然后最终在createstate里返回一个改造好的dispatch, 接下来我只要看下thunk是怎样实现的,就了解了整个中间件使用的原理:
function createthunkmiddleware(extraargument) { return function (_ref) { var dispatch = _ref.dispatch, getstate = _ref.getstate; return function (next) { //最终的dispatch //next就是接收的store.dispatch参数,为上一个中间件改造过的dispatch return function (action) { if (typeof action === 'function') { return action(dispatch, getstate, extraargument); } return next(action); }; }; }; } var thunk = createthunkmiddleware(); thunk.withextraargument = createthunkmiddleware; export default thunk;
代码同样精炼,改造后的dispatch入参接受的数据类型:
1、非function,不处理,将action 传给下一个中间件,最终都会根据传入的action计算相应的reducers(开头说的自执行)————store.dispatch(action)
2、function类型的action, 自动触发函数,并且将store.dispatch传入
总结
再结合开始介绍的thunk用法,我们就明白了thunk的原理,可以在actioncreators里通过返回一个函数,然后就可以在函数里编写某些异步操作了,待异步操作结束,最后通过传入的store.dispatch,发出action通知给store要进行状态更新。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 晚上吃姜赛砒霜是真的吗?到底生姜要怎么吃才对我们的身体好呢
下一篇: 算法篇----冒泡算法