return promise after action creator with thunk

[Tux1]

Hi all,

I think I take the wrong way to manage this issue so I ask for advise.
Before mounting a component, I would like to fetch data and then make the component visible.

My action creator is simple :

function loadFoo(fooId) {
  return dispatch => {
    dispatch(loadFooRequest());

    let query = new Parse.Query('Foo');

    query.get(fooId)
    .then((response) => {
      const json = response.toJSON();
      return dispatch(loadFooSuccess(json));

    }, (error) => dispatch(loadFooError(error)))
  }
}

and in my component I just do that :

ComponentDidMount() {
    this.props.dispatch(loadFoo(this.props.params.fooId));
    this.props.dispatch(showPane());
}

My issue is that the Pane will be shown before the data gets loaded.

I would like to do something like :

ComponentDidMount() {
    this.props.dispatch(loadFoo(this.props.params.fooId)).then(() => {
        this.props.dispatch(showPane());
    });
}

What is the right way to manage this kind of thing ?

Thanks

[VictorBlomberg]

If you change query.get(fooId) to return query.get(fooId) (thus returning the promise), you should be able to do exactly what you want.

[Tux1]

Yes but everywhere I want to use this function, I will need to dispatch loadFooSuccess myself.
I think loadFooSuccess and loadFooError should return a promise. No ?

Finally, I find a way following your advise:

function loadFoo(fooId) {
  return dispatch => {
    dispatch(loadBarRequest());

    let query = new Parse.Query('Foo');

    return query.get(fooId)
    .then((response) => {
      const json = response.toJSON();
      dispatch(loadFooSuccess(json));
      return Promise.resolve();

    }, (error) => {
      dispatch(loadFooError(error));
      return Promise.error(error);
    });
  }
}

Is a proper way to deal with my needs ?

[gaearon]

Unfortunately I don’t quite understand what is being asked here, and can’t really help. As @VictorBlomberg said, if you return a promise, you should be able to dispatch(loadFoo(id)).then(...).

Yes but everywhere I want to use this function, I will need to dispatch loadFooSuccess myself.

You wouldn’t. If you dispatch(loadFoo(id)) and it dispatches loadFooSuccess in its code, you wouldn’t need to dispatch loadFooSuccess anywhere else.

I hope this helps. If it doesn’t, I encourage you to ask on StackOverflow because this is a bug tracker rather than a discussion board, so there is much less visibility to questions here.