CODEWITHSUNDEEP
javascriptreactjsreduxes6-promise
GuerillaRadio
GuerillaRadio

Reputation: 1297

Redux - Resolve a Promise after calling dispatch action in component

I have an 'addToFolder' action which dispatches an action that is handled in my Redux reducer.

export function addToFolder(folderIds, contentId, contentType) {
  const item = {};
  item.folder_ids = folderIds;
  item.content_id = contentId;
  item.content_type = contentType;

  return function(dispatch) {
    return fetch(`${getAPIPath}api/addtofolder`, {
      method: 'PUT',
      body: JSON.stringify(item),
      credentials: 'include',
      headers: {
        Accept: 'application/json',
      },
    })
    .then((response) => {
      response.json().then((res) => {
        dispatch(addToFolderSuccess(res.data));
      });
    }).catch((error) => {
      throw (error);
    });
  };
}

In my component after clicking on my 'Add to Folders' button I dispatch the action. I would like to use .then to fire a snack/notification action, but use the response from my API call in order to fill in the id and message text displayed by the notification. Currently response is undefined.

addToFolder = () => {
    this.props.actions.addToFolder(this.state.activeItems, this.props.contentId, this.props.contentType)
      .then((response) => {
        this.setState({ addBtnLoading: false });
        this.props.actions.dispatch(showSnack(response.id, {
          label: response.message,
          timeout: 4000,
        }));
      });
  };

Upvotes: 1

Views: 1652

Answers (1)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

You forgot to return

.then((response) => {
      // nested promise
      return response.json().then((res) => {
        dispatch(addToFolderSuccess(res.data));

        // the result
        return res;
      });

Upvotes: 1

Related Questions