将 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 的原因。我在 mapStateToProps 中看到了一些 redux-thunk 用法，但我的用例非常不同。

这是我更新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，动作创建者可以 return 一个函数，它接收 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)

将 redux-thunk 合并到 mapDispatchToProps 中

Incorporate redux-thunk into mapDispatchToProps

react-native

redux

react-redux

redux-thunk