Wait for a redux action to finish dispatching

Question

I have the following action creator:

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    dispatch(appendItem(Item));
    dispatch(
      scrollToNextIndex(
        getState().items.length - 1
      )
    )
  }
}

Problem is that scrollToNextItem runs before appendItem has finished and the scroll position ends up being incorrect. I can prove this is the case by adding a setTimeout to make the execution of the script wait for the next tick before running scrollToNextItem:

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    dispatch(appendItem(Item));
    setTimeout(() => {
      dispatch(
        scrollToNextIndex(
          getState().items.length - 1
        )
      )
    }, 0);
  }
}

How can I wait for the appendItem action to finish? In standard react land I would just use the setState callback:

this.setState({something: 'some thing'}, () => {
  console.log('something is set');
});

But dispatch doesn't provide any callback functionality.

Then it should be synchronous and by the time you reach setTimeout, appendItem is already finished @mikeRifgin — Alberto Centelles, Dec 03 '16 at 10:28
Take a look at "useEffect" from the Hooks Api, might work for what you are looking for. — tif, Sep 23 '20 at 18:58

Alberto Centelles · Accepted Answer · 2016-12-03T10:28:53.407

17

You can always wrap appendItem into a promise and pass dispatch as an argument to it

const appendItem = (item, dispatch) => new Promise((resolve, reject) => {
  // do anything here
  dispatch(<your-action>);
  resolve();
}

Then you can call it like this from scrolltoNextItem

export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    appendItem(Item, dispatch).then(() => {
      dispatch(
        scrollToNextIndex(
          getState().items.length - 1
        )
      )
    })
  }
}

edited Dec 03 '16 at 10:28

answered Dec 03 '16 at 09:46

Alberto Centelles

1,119
8
23

1

Of course, why didn't I think of that! Thanks :) I'm assuming you meant to remove the setTimeout from your example above? – Mike Rifgin Dec 03 '16 at 10:25
67

How does this guarantee that `resolve()` is called after the action completes? – Alvaro May 08 '17 at 13:32
1

Yes. Actions are normally synchronous, unless you are using a thunk or other async actions http://redux.js.org/docs/advanced/AsyncActions.html – Alberto Centelles May 09 '17 at 14:18
@Alvaro you can test that by adding debugger, nice – Sîrbu Nicolae-Cezar Mar 25 '19 at 21:31
I think that can be covered if you use `finally` instead of `then`. – Fabian Merchan Jul 28 '20 at 21:23
1

Correct me if I'm wrong, but actions are normally synchronous, so the store has updated, but in the case of react, that doesn't necessarily mean that all the components that are pulling values from redux have rerendered with those values. – Josiah Nunemaker Dec 09 '20 at 17:16
1

This is not a good answer because of Alvaro's comment. – Shn_Android_Dev Apr 02 '21 at 00:47
@Alvaro you can repeat this steps if you use a thunk or something. And use then() like its done with appendItem. Right? – M1sterPl0w May 04 '21 at 15:21

Wait for a redux action to finish dispatching

1 Answers1