redux-thunk 源码学习记录
程序员文章站
2022-05-03 11:44:32
redux触发store更新,使用的dispatch(action),在关于createStore的源码解读中可以看到,store.dispatch限制了action必须是一个纯对象。是为了保持reducer的纯净性 只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有 ......
redux触发store更新,使用的dispatch(action),在关于createstore的源码解读中可以看到,store.dispatch限制了action必须是一个纯对象。是为了保持reducer的纯净性
只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 api 请求、没有变量修改,单纯执行计算。
redux-thunk是redux推荐的一个异步处理middleware,它可以在触发store.dispatch
之前完成reducer中不能搞定的副作用,比如异步操作。
源码实现
function createthunkmiddleware(extraargument) { return ({ dispatch, getstate }) => next => action => { // 如果ation是函数,这调用这个函数,并且传入dispatch和getstate if (typeof action === 'function') { // 此处的dispatch是在applymiddleware中改写过的 return action(dispatch, getstate, extraargument); } // 如果是对象,这调用下一个middleware return next(action); }; } const thunk = createthunkmiddleware(); // 返回一个middleware // 提供原函数,可以传递额外的参数 thunk.withextraargument = createthunkmiddleware; export default thunk;
redux-thunk这个middleware可以接受函数类型的action,在action函数中进行各种自定义的操作(延时,接口请求等),然后再使用传入的dispatch
触发实际的action动作(纯对象)。这样就不会影响reducer的纯洁性。
实例
异步的action
export function logtime (time) { return { type: log_time, time } } export function delaylogtime () { let now = new date().tostring(); return (dispatch) => { //可接受dispatch,getstate // 进行副作用操作 settimeout( ()=> { // 实际触发ation dispatch(logtime(`${now} --- ${new date().tostring()}`)) },1000) } }
使用redux-thunk
import thunk from 'redux-thunk' let store = createstore(reducer,applymiddleware(thunk))
推荐阅读
-
PHP5 面向对象(学习记录)
-
Python Logging 日志记录入门学习
-
Django开发学习BUG记录--RemovedInDjango19Warning:Model class apps.user.models.User doesn't declare an explicit app_label
-
laravel框架学习记录之表单操作详解
-
LinkedHashMap源码学习
-
PHP getID3类的使用方法学习笔记【附getID3源码下载】
-
QT 学习基础问题记录
-
PHP网页游戏学习之Xnova(ogame)源码解读(十五)
-
详解Vue源码学习之callHook钩子函数
-
学习php开源项目的源码指南