006 Redux-thunk

试想一下如果不用不用redux-thunk怎么发起一个异步请求?是否是这样

dispatch一个action对象 --> 触发reducer --> reducer调用异步方法 --> 异步方法回调再次dispatch一个action对象 --> 触发reducer --> 改变 store

// 先创建「请求数据」的 action，然后再创建一个「更新数据」的 action
dispatch({type: 'fetchData'}) // 派发「请求数据」的 action
const fetchData = () => {
    fetch('placeholder/getData').then(res => { // 请求数据
        dispatch({type: 'saveData', Data: res}); // 派发「更新数据」的 action
	})
}
// reducer
if (type === 'fetchData') {
    fetchData()
    return .........
} else if (type === 'saveData') {
    return {...state,Data}
}

通过redux-thunk 我们可以将dispatch变成一个thunk，可以支持传入函数，使用redux-thunk 写法：

// 数据之后创建「更新数据」的 action
dispatch(action);
const action = function (dispatch) {
    return fetch('placeholder/getData').then(res => {
        dispatch({type: 'saveData', Data: res}); 
	})
}

可以看出redux-thunk 只是帮我们调了那个函数，让操作更简洁也减少了代码冗余。最后看一下源码

const thunk = function ({dispatch, getState}) {
  return function (next) {
    return function (action) {
      if (typeof action === 'function') {
        return action(dispatch, getState)
      } else {
        return next(action)
      }
    }
  }
}

总结

redux-thunk优点:

• 体积小: redux-thunk的实现方式很简单,只有不到20行代码
• 使用简单: redux-thunk没有引入像redux-saga或者redux-observable额外的范式,上手简单

redux-thunk缺陷:

• 样板代码过多: 与redux本身一样,通常一个请求需要大量的代码,而且很多都是重复性质的
• 耦合严重: 异步操作与redux的action偶合在一起,不方便管理
• 功能孱弱: 有一些实际开发中常用的功能需要自己进行封装

---

参考

掘金社区 (opens new window)