reactjs - 异步/等待 redux thunk 未正确返回操作 promise

Question

我有一个使用 Axios 的 thunk，它使用 Sequelize 发布到 Express 路由。

路由正确发布(即数据被添加到数据库中)，但 React 组件内部的操作未按预期运行。使用 async/await ，我希望该操作在继续之前等待它完成数据库发布，但情况并非如此。我从 Action 中得到 undefined。

thunk 击中了我正在调度操作以更新我的 redux 存储并返回响应的快速路由:

const addedNewList = (newList) => ({type: ADD_NEW_LIST, newList})

export const addNewList = (name, userId) => async dispatch => {
  try {
    const { data } = await axios.post('/api/list/add', { name, userId })
    dispatch(addedNewList(data))
    return data
  } catch (err) {
    console.error(err)
  }
}

使用调试器，我可以确认 return data 实际上正在从我需要的服务器返回响应。我还可以确认 redux 商店正在正确更新。

但是在这里，当我尝试将响应数据作为 result 访问时，我得到 undefined :

  handleSubmit = async () => {
    const result = await this.props.addNewList(this.state.name, this.props.userId)

    // ** result is 'undefined' **

    this.handleClose()

    // pass off the results
  }

如果我在调用 setTimeout 操作后添加 addNewList，它会按预期工作。这向我表明，也许它没有返回 promise ？但我的理解是，如果您在 thunk 中从服务器返回响应，它会这样做。

为了完整起见，这是我的路线，我也已通过调试器确认数据正在按预期传递:

const userAuth = function(req, res, next) {
  if (req.isAuthenticated()) {
    return next()
  }
  res.status(401).send('Unauthorized user')
}

router.post('/add', userAuth, async (req, res, next) => {
  const { name, userId } = req.body
  try {
    const list = await List.create({ name, userId })
    res.json(list)
  } catch(err) { next(err) }
})

为什么undefined方法中的action会返回handleSubmit？

Answer 1

尝试返回 dispatch 的 addedNewList(data) 代替:

export const addNewList = (name, userId) => async dispatch => {
  try {
    const { data } = await axios.post('/api/list/add', { name, userId })
    return Promise.resolve(dispatch(addedNewList(data)));
  } catch (err) {
    console.error(err)
  }
}

话虽如此，您可以考虑重构组件以使用 mapStateToProps 来使用更新的 Redux 存储中的值/result，而不是显式等待响应并手动传递值？