zoukankan      html  css  js  c++  java
  • redux-thunk 源码学习记录

    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))
    
  • 相关阅读:
    js面试题-----页面布局
    js面试题-----原型和原型链
    js面试题-----运行环境
    js面试题-----开发环境
    js面试题-----事件及ajax
    js面试题-----DOM操作和BOM操作
    js面试题-----异步和单线程及其他知识点
    js面试题-----作用域与闭包
    js面试题-----变量类型和计算
    js学习总结----webapp之使用less构建响应式布局
  • 原文地址:https://www.cnblogs.com/shapeY/p/10768380.html
Copyright © 2011-2022 走看看