Question

如何使用redux中api调用的响应正确重定向用户？我需要在axios之后获得resp但是我没有定义，虽然我已经在行动中返回了thunk

//jobForm.js
import React, { Component } from 'react'

import { connect } from 'react-redux'
import { createJob } from '~/actions/jobAction'

import { getUserId } from '~/utils'
import moment from 'moment'

@connect(state=>state.job,{createJob})
class Form extends Component {

  handleSubmitForm = () => {
    this.props.createJob({formData})
    .then(resp => console.log(resp)) //undefined?)
  }

  //etc..
}

export default Form

//action

export function createJob(params) {
  return dispatch=>{

    dispatch({type: CREATING_JOB})

    return axios.post(`/job/create`, {...params})
    .then(res=>{
      if(res.status===200 && res.data.status===1){
        dispatch({
          type: CREATE_JOB,
          payload: res.data.data
        })
      }
    })
    .catch(res => {
      dispatch(errorMsg(res.data.msg))
    })
  }
}

我可以将有效负载传递给reducer，但我需要一个响应的id来将用户重定向到创建的作业页面。

Answer 1

在处理API调用后，您没有返回任何内容，这就是promise将解析为“undefined”的原因。对于使用数据解析的承诺，您需要在分派操作后返回id。见下文。

export function createJob(params) {
  return dispatch=>{

    dispatch({type: CREATING_JOB})

    return axios.post(`/job/create`, {...params})
    .then(res=>{
      if(res.status===200 && res.data.status===1){
        dispatch({
          type: CREATE_JOB,
          payload: res.data.data
        });

        // RETURN ID AFTER DISPATCHING ACTION
        return res.data.data

      }
    })
    .catch(res => {
      dispatch(errorMsg(res.data.msg))
    })
  }
}

一种替代方法，可以说更符合通量单向数据流范例，即基于redux状态的变化而不是完成动作来执行重定向。

您可以使用componentWillReceiveProps来确定是否已创建新作业，如果是，则重定向

componentWillReceiveProps(nextProps) {
  // use nextProps to determine if the new job has been added
  // to the job state
  // ...
  const isNewJobAdded = nextProps.job.includes(...)
  if (isNewJobAdded) {
    // perform redirect
    ...
  }
}

响应未定义然后使用async redux api调用？

1 个答案: