How to return a promise for a simple redux action creator?

Question

I have a function add where no promises is returned to the caller.

For example:

let add = (foo) => {this.props.save(foo)};

And in another function of my application I would like to do:

...
return  add()
        .then( ... do something else here ... );

I just want to wait till add() is done and then do something else. I understand async save does not return a promise. Its a simple redux action.

 export const save = (something) => (dispatch) => {

  ApiUtil.patch(`google.com`, { data: { 
 something  } }).
   then(() => {
  dispatch({ type: Constants.SET_FALSE });
  },
() => {
  dispatch({ type: Constants.SET_SAVE_FAILED,
    payload: { saveFailed: true } });
});
};

I have pasted it here to show action

Answer 1

It looks to me like you are using redux-thunk for async actions, since your add action creator is in fact returning a function that accepts dispatch rather than a simple action object.

If you are using redux-thunk, then whatever you return from your thunk will be propagated back out. So if you modify your code such that:

let add = (foo) => this.props.save(foo); // Now returns result of save

Then update your thunk to:

export const add = (something) => (dispatch) =>
    ApiUtil.patch(`google.com`, { data: { something } })
        .then(() => { dispatch({ type: Constants.SET_FALSE }); },
            () => { dispatch({ type: Constants.SET_SAVE_FAILED, payload: { saveFailed: true }});}
        );

(Where you'll notice I removed the outside-most curlies), then the promise from ApiUtil should bubble all the way back up and you should be able to .then on it.

Answer 2

First you have to understand what this.props.save() returns. If it returns a promise, then you need only return that from add:

const add = (foo) => { return this.props.save(foo); }

So the problem is just what the definition of save is.