CODEWITHSUNDEEP
javascriptreactjsreduxredux-thunk
jacoballenwood
jacoballenwood

Reputation: 3057

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!

Upvotes: 0

Views: 72

Answers (1)

DDS
DDS

Reputation: 4375

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

Upvotes: 1

Related Questions