javascript - React executing action call one after another is not working

Question

export function updateSchools(subjectId, schoolId, data) {
const { year } = data
  return {
    type: actionTypes.UPDATE_SCHOOL,
    meta: actionTypes.UPDATE_SCHOOL,
    payload: http.put(
      `api/school/${schoolId}`,
      data
    ).then(data => {
      return _getSchools(subjectId, year)
    })
  }
}


const _getSchools = (subjectId, year) => {
  return http.get(`api/school/${subjectId}/subject/${year}`).then(data => {
    //some logic
    
    return data
  })
}

Upon calling the action updateSchools function, the updated value is not returning in _getSchools response. When the page is reloaded the updated value is returned and even debugging at updateSchools function, in the database the value is updated. Can anyone please tell me where I'm wrong? Promise and react-redux are used in the application.

question from:https://stackoverflow.com/questions/65881013/react-executing-action-call-one-after-another-is-not-working

Answer 1

Your payload that you're sending in the action is a Promise. Please check the Redux documentation,

An action is a plain JavaScript object

This means that you shouldn't send any promises or other functions in your action. Promises should start and end elsewhere outside of redux actions and reducers.

The common way fetching data is through the Redux middleware. To name one middleware - redux-thunk. You can definitely avoid using middlewares and write all by yourself, it's up to you. But one thing you should change in your app -- is stop sending a promise in action's payload.