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发送take n

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

问题是，在POST请求成功完成后，我不知道如何接收新的_id。网址是否应该重定向发生在操作文件或组件中？

也许我应该push来自行动的网址，但我也无法解决这个问题。

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

感谢

Answer 1

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

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

更新：

由于您使用的是redux-saga中间件，因此您只需在saga Ajax回调中执行对react-router-redux action creator的调用。 Doc在这里：https://github.com/reactjs/react-router-redux#what-if-i-want-to-issue-navigation-events-via-redux-actions

请务必从react-router导入browserHistory以获取路由器中间件

{{1}}

Answer 2

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

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

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

2 个答案: