响应未定义，然后用于异步redux api调用？

Question

How to properly redirect user using the response of the api call in redux? I need the resp after axios's then but I got undefined, although I've returned the thunk in my action

//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))
    })
  }
}

I can pass my payload to reducer but I need a response's id to redirect the user to a created job page.

Answer 1

You're not returning anything after processing the API call, which is why the promise resolves to "undefined". For the promise to resolve with data, you'll need to return the id after dispatching the action. See below.

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))
    })
  }
}

An alternative approach, that is arguably more inline with the flux one-way data flow paradigm would be to perform the redirect based on a change in the redux state rather than completion of the action.

You could use componentWillReceiveProps to determine if the new job has been created, if so, redirect

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
    ...
  }
}