jakeaaron jakeaaron - 10 days ago 6
React JSX Question

Binding variable on redux dispatch ActionCreator

I have an array of promises, and I'm trying to push new promises into that array inside of another dispatch.then function, but it appears that the array is always out of scope

load(params, auth) {
return dispatch => {
const { passage, versions, language_tag } = params
let promises = []

versions.forEach((id) => {
// get the version info, and then pass it along
dispatch(ActionCreators.version({ id: id })).bind(promises).then((version) => {
promises.push(dispatch(ActionCreators.passages({
id: id,
references: [passage],
versionInfo: {
local_abbreviation: version.abbreviation,
local_title: version.title,
id: version.id,
},
})))
})
})
//
promises.push(dispatch(ActionCreators.configuration()))
promises.push(dispatch(ActionCreators.byRef({ language_tag })))

console.log(promises.length)
return Promise.all(promises)
}
},


I've tried a few different approaches, such as setting
var that = this
right before the dispatch inside of the versions loop, and what is shown here, trying to use
.bind(promises)
on the dispatch.

promises.length is always 2, (because of the two that are actually getting pushed at the bottom). I can console statements inside of the
.then
so I know it's getting executed, but the dispatches are not ending up in the promises array.

I could very well be thinking of the dispatch function in an incorrect way.

Any help would be appreciated!

DDS DDS
Answer

The problem is that since you're adding the promises on then(), you have already returned the array by the time you're adding the promises. So they do get added, but too late.

Instead, try this:

load(params, auth) {
  return dispatch => {
    const { passage, versions, language_tag } = params;
    let promises = [];

    versions.forEach((id) => {
      // get the version info, and then pass it along
      promises.push(dispatch(ActionCreators.version({ id: id })).then((version) => {
        return dispatch(ActionCreators.passages({
          id: id,
          references: [passage],
          versionInfo: {
            local_abbreviation: version.abbreviation,
            local_title: version.title,
            id: version.id,
          },
        }));
      }));
    });
    //
    promises.push(dispatch(ActionCreators.configuration()));
    promises.push(dispatch(ActionCreators.byRef({ language_tag })));

    console.log(promises.length);
    return Promise.all(promises)
  }
}