从 thunk 返回承诺答案

【问题标题】：return promise from thunk从 thunk 返回承诺
【发布时间】：2019-08-14 02:44:00
【问题描述】：

我正在尝试在 redux-thunk 中使用我的第一个 thunk：

让 redux-thunk 进入我已经使用 redux-observable 的应用程序：

import thunk from 'redux-thunk'

export const store = createStore(
  rootReducer,
  vepo,
  composeWithDevTools(applyMiddleware(createEpicMiddleware(rootEpic), thunk))
)

像这样使用它：

动作创建者：

export const updateShowProductIsVeganModal = (payload: boolean) => {
  return function (dispatch) {
    return new Promise((resolve, reject) => {
      dispatch({
        type: 'UPDATE_INSPECTION_SHOW_PRODUCT_IS_VEGAN_MODAL',
        payload
      })
      resolve()
    })
  }
}

然后我有了这个组件（它要大得多，我已经为这个问题把它剥离了）：

const veganPress = (props, refs) => {
  props.updateShowProductIsVeganModal(true).then(() => {
    console.log("plz work")
    refs.toast.show('hello world!')
  })
}

class ProductDetailsView extends Component<any, State> {
  render = () => {
    return (
       <Button onPress={() => veganPress(this.props, this.refs)}>
       <Toast ref="toast"/>
    )}
}

const mapDispatchToProps = (dispatch: Dispatch<*>): any => ({
  updateShowProductIsVeganModal: (show: boolean) => {
    dispatch(updateShowProductIsVeganModal(show))
  }
})

const view = connect(
  mapStateToProps,
  mapDispatchToProps
)(ProductDetailsView)

我得到错误：

ExceptionsManager.js:63 无法读取未定义的属性 'then'

指的是.then里面的veganPress()

如何以我尝试的方式返回可以使用.then 的承诺？

【问题讨论】：

为什么要返回一个promise？因为如果您正在调度和操作，它将在商店中更新，因此您可以使用 redux 连接的容器进行访问。
能否分享一下你在ProductDetailsView组件中实现的connect函数
@AadilMehraj 是的，谢谢

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

【解决方案1】：

updateShowProductIsVeganModal 不返回承诺。改成

const mapDispatchToProps = (dispatch: Dispatch<*>): any => ({
  updateShowProductIsVeganModal: (show: boolean) => {
    return dispatch(updateShowProductIsVeganModal(show))
  }
})

【讨论】：