ReactJS + Redux: how do I wait for the submission to complete before proceeding to the next step?

Question

In a ReactJS + Redux project, I have a method in which it executes an API request. If successful, I would like to send another creator of the action and wait until it ends. Then, when it is complete, continue to the next step.

Currently, the following code sends to where it calls another API call, but even before the state is updated through dispatch, it immediately executes window.location.href ='http://localhost:3005/#/Home', after which the sending will be completed later.

So, how can I wait for the completion of dispatch(actions.updateUserInfo(userInfo.username))the next line of code window.location.href ='http://localhost:3005/#/Home'?

Here is the action creator:

  loggingIn(userInfo) {

    var userInfoBody = {
        'username': `${userInfo.username}`,
        'password': `${userInfo.password}`
    }

    var configuration = {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(userInfoBody)
    }

    return function(dispatch) {
      fetch('https://backendserver.com:8080/creds', configuration)
      .then(response => response.json())
      .then(response => {
        //Would like to finish this dispatch completely before start executing window.location.href ='http://localhost:3005/#/Home'
        dispatch(actions.updateUserInfo(userInfo.username))
        window.location.href ='http://localhost:3005/#/Home'
      })
      .catch((error) => {
        console.log("Error: ", error)
      })
    }

Thank you in advance

Answer 1

, , , , window.location.href= '...'.

redux "", , .

dispatch(actions.updateUserInfo(userInfo.username))
// It guaranteed that at this point your updateUserInfo action is handled and state tree is updated
dispatch(actions.userInfoUpdated(userInfo.username))

"userInfoUpdated", redux, window.location.href= '...'.

Answer 2

fetch , . , updateUserInfo, :

return function(dispatch) {
  return fetch('https://backendserver.com:8080/creds', configuration)
  .then(response => response.json())
  .then(response => {
    //Would like to finish this dispatch completely before start executing window.location.href ='http://localhost:3005/#/Home'
    dispatch(actions.updateUserInfo(userInfo.username))
     .then(() => {
       window.location.href ='http://localhost:3005/#/Home'
     })
  })
  .catch((error) => {
    console.log("Error: ", error)
  })
}

thunk (updateUserInfo) React, thunk (loggingIn) imo. .

Answer 3

window.location.href ='http://localhost:3005/#/Home' . , :

constructor(props, children)
{
    TheStore.subscribe( this.listenForDispatch.bind( this ) );
}

listenForDispatch()
{
    //Check the state is what you want
    if ( TheStore.getState().someProp == "somevalue" )
    {
        //Call it here!
        window.location.href ='http://localhost:3005/#/Home'
    }
}

EDIT: Redux , . subscribe Redux.

Answer 4

, - ( ), :

:

function userReducer (state={ doneUpdating: false, userData: null }, action) {
  if (action.type === 'UPDATE_USER_INFO') { // this is the action dispatched by updateUserInfo
    return {  ...state, userData: action.payload, doneUpdating: true }
  }
}

:

class YourComponent {
  componentWillReceiveProps (nextProps) {
    if (!this.props.doneUpdating && nextProps.doneUpdating) {
      window.location.href ='http://localhost:3005/#/Home'
    }
  }

  // Rest of your component methods here...
}

function mapStateToProps (state) {
  return { doneUpdating: state.userReducer.doneUpdating }
}

connect(mapStateToProps)(YourComponent)

, , , . ( Redux) , componentWillReceiveProps (:)) . / componentWillMount. , , . doneUpdating , , WillReceiveProps .