POST 在 react/redux 环境中的请求 - 如何获得返回的 `_id` 以重定向

Question

我的反应表单组件的formSubmit部分如下：

handleFormSubmission = (e) => {
  if (e) e.preventDefault()
  const { showErrors, validationErrors, ...formData } = this.state
  const { submitForm, router } = this.props
  const errors = run(formData, fieldValidations)

  let newState = update(this.state, {
    validationErrors: { $set: errors }
  })

  this.setState(newState, () => {
     if (isEmpty(this.state.validationErrors)) {
     // submitForm is an dispatches a redux action
     submitForm( formData )

     if (formData._id) {
       // the below is good on a PUT request
       router.push(`/accounts/lodgedocket/${formData._id}`)
     } else router.push(`/accounts/lodge`)
     // with the else above I have no _id to redirect to
   } else this.matterno.focus()
 })

submitForm 是一个调度 redux 动作，然后由 redux-saga

taken

const { payload } = yield take( constants.SUBMIT_LODGE_FORM )

问题是在 POST 请求成功完成后，我不知道如何获取新的 _id。 url 重定向应该发生在操作文件中还是组件中？

也许我应该从动作中 push url，但我也想不通。

我正在使用 reactjs、redux、react-redux 和 react-redux-router。

谢谢

Answer 1

您应该添加更多代码。无论如何，它看起来不像真正地道的 redux。

如果您正在进行 Ajax 调用，您应该有一个中间件，例如 redux-thunk。它将在 Ajax 回调中调度一个动作。该操作将包含服务器响应并由 reducer 处理。您将获得一个带有 id 的新状态，因此新的组件渲染将在 props 中获得它。

更新：

由于您使用的是 redux-saga 中间件，因此您可以简单地在 saga Ajax 回调中执行对 react-router-redux 操作创建者的调用。文档在这里：https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

一定要为路由器中间件从 react-router 导入 browserHistory

import { browserHistory } from 'react-router'
const middleware = routerMiddleware(browserHistory)

Answer 2

问题实际上是从哪里调度更改 url 的操作。答案来自Giorgio Bozio的回答然后：

https://github.com/redux-saga/redux-saga/issues/79#issuecomment-215665308 - 三种方式改变 url.
具体来说，我用了import { push } from 'react-router-redux'
但我遇到了如何配置中间件的问题，link 为我解决了这个问题：https://github.com/reactjs/react-router-redux/issues/366#issuecomment-212044390

POST 在 react/redux 环境中的请求 - 如何获得返回的 `_id` 以重定向

POST request in a react/redux environment - how to get returned `_id` to redirect

reactjs

redux-saga

react-redux

react-router-redux