前面几篇咱们就 Redux 展开了几篇文章,此次咱们来实现 react-thunk,就不是叫实现 redux-thunk 了,直接上源码,由于源码就11行。若是对 Redux 中间件还不理解的,能够看我写的 Redux 文章。javascript
在使用 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 的源码比较简洁,实际就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
完整源码以下: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