将redux-thunk集成到mapDispatchToProps中

Question

我有一个现有的mapDispatchToProps

const mapDispatchToProps = (dispatch) => ({
  updateThickness: (text, number) => {
    dispatch(updateDimension('thickness', text, number))
  }
})

但是现在我需要在每次updateThickness时计算音量并分派结果。其实质是：

let litres = calcVol(getState())
dispatch(updateVolume(litres))

其中getState()是redux商店。这就是为什么我要添加redux-thunk。我已经看到了redux-thunk在mapStateToProps中的一些用法，但是我的用例非常不同。

这是我对mapDispatchToProps的尝试

const mapDispatchToProps = (dispatch) => ({
  updateThickness: (text, number) => {
    dispatch(updateDimension('thickness', text, number))
    let litres = calcVol(getState())
    dispatch(updateVolume(litres))
  }
})

但是，getState()还没有定义，因为我没有正确地合并redux-thunk。

如何正确地将redux-thunk集成到mapDispatchToProps中

Answer 1

updateThickness没有使用redux-thunk。使用redux-thunk，动作创建者可以返回一个函数，该函数接收dispatch和getState作为参数。

所以，试一试吧：

updateThickness: (text, number) => (dispatch, getState) => {
  dispatch(updateDimension('thickness', text, number))
  let litres = calcVol(getState())
  dispatch(updateVolume(litres))
}

updateThickness也是一种动作创建者。通常，我们将行为创作者分开：

const updateThickness = (text, number) => (dispatch, getState) => {
  dispatch(updateDimension('thickness', text, number))
  let litres = calcVol(getState())
  dispatch(updateVolume(litres))
}

你把它连接成这样：

connect(
  mapStateToProps,
  { updateThickness } // can be a plain object
)(YourComponent)