将 redux-thunk 合并到 mapDispatchToProps 中答案

【问题标题】：Incorporate redux-thunk into mapDispatchToProps将 redux-thunk 合并到 mapDispatchToProps 中
【发布时间】：2017-03-27 05:59:35
【问题描述】：

我有一个现有的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 中？

【问题讨论】：

你可能想在 Redux 中查看selectors。 github.com/reactjs/reselect

标签： react-native redux react-redux redux-thunk

【解决方案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)

【讨论】：