理解 redux-thunk 源码

前言

前面几篇咱们就 Redux 展开了几篇文章,此次咱们来实现 react-thunk,就不是叫实现 redux-thunk 了,直接上源码,由于源码就11行。若是对 Redux 中间件还不理解的,能够看我写的 Redux 文章。javascript

为何要用 redux-thunk

在使用 Redux 过程,经过 dispatch 方法派发一个 action 对象。当咱们使用 redux-thunk 后,能够 dispatch 一个 function。redux-thunk会自动调用这个 function,而且传递 dispatch, getState 方法做为参数。这样一来,咱们就能在这个 function 里面处理异步逻辑,处理复杂逻辑,这是原来 Redux 作不到的,由于原来就只能 dispatch 一个简单对象。java

用法

redux-thunk 做为 redux 的中间件,主要用来处理异步请求,好比:react

export function fetchData() {
  return (dispatch, getState) => {
    // to do ...
    axios.get('https://jsonplaceholder.typicode.com/todos/1').then(res => {
      console.log(res)
    })
  }
}

redux-thunk 源码

redux-thunk 的源码比较简洁,实际就11行。前几篇咱们说到 redux 的中间件形式,
本质上是对 store.dispatch 方法进行了加强改造,基本是相似这种形式:ios

const middleware = (store) => next => action => {}

在这里就不详细解释了,能够看 实现一个Redux(完善版)git

先给个缩水版的实现:github

const thunk = ({ getState, dispatch }) => next => action => {
    if (typeof action === 'function') {
        return action(dispatch, getState)
    }
    return next(action)
}
export default thunk
  • 原理:即当 action 为 function 的时候,就调用这个 function (传入 dispatch, getState)并返回;若是不是,就直接传给下一个中间件。

完整源码以下:json

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    // 若是action是一个function,就返回action(dispatch, getState, extraArgument),不然返回next(action)。
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument)
    }
    // next为以前传入的store.dispatch,即改写前的dispatch
    return next(action)
  }
}

const thunk = createThunkMiddleware()
// 给thunk设置一个变量withExtraArgument,而且将createThunkMiddleware整个函数赋给它
thunk.withExtraArgument = createThunkMiddleware

export default thunk

咱们发现其实还多了 extraArgument 传入,这个是自定义参数,以下用法:redux

const api = "https://jsonplaceholder.typicode.com/todos/1";
const whatever = 10;

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({ api, whatever })),
);

// later
function fetchData() {
  return (dispatch, getState, { api, whatever }) => {
    // you can use api and something else here
  };
}

总结

同 redux-thunk 很是流行的库 redux-saga 同样,都是在 redux 中作异步请求等反作用。Redux 相关的系列文章就暂时写到这部分为止,下次会写其余系列。axios


相关文章
相关标签/搜索