Warten Sie ein redux-Aktion zu beenden, Versand

Habe ich die folgende Aktion Autor:

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

Problem ist, dass scrollToNextItem läuft, bevor appendItem beendet hat und die scroll-position endet als falsch. Kann ich beweisen, dass dies der Fall ist, indem ein setTimeout um die Ausführung des Skripts warten, bis der nächste tick vor der Ausführung scrollToNextItem:

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

Wie kann ich warten, bis die appendItem Aktion zu beenden? Im standard reagieren land, ich würde nur verwenden Sie die setState callback:

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

Aber dispatch bietet keine callback-Funktionalität.

  • Wie funktioniert appendItem Aussehen?
  • Append-Element ist nur eine schlichte Aktion.
  • Dann sollte es synchron sein und von der Zeit erreichen Sie setTimeout, appendItem ist schon fertig @mikeRifgin
InformationsquelleAutor Mike Rifgin | 2016-12-03
  1. 10

    Kann man immer wickeln appendItem in ein Versprechen und pass dispatch als argument, um es

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

    Dann Sie können es nennen, wie dies aus scrolltoNextItem

    export function scrolltoNextItem(item) {
  return (dispatch, getState) => {
    appendItem(Item, dispatch).then(() => {
      dispatch(
        scrollToNextIndex(
          getState().items.length - 1
        )
      )
    })
  }
}
    • Natürlich, warum habe ich nicht daran denke! Danke 🙂 ich nehme an, Sie meinte zu entfernen setTimeout aus Ihrem obigen Beispiel?
    • Wie funktioniert diese Garantie, dass resolve() aufgerufen wird, nachdem die Aktion abgeschlossen ist?
    • Ja. Aktionen sind normalerweise synchron, es sei denn, Sie sind mit einem thunk oder anderen asynchronen Aktionen redux.js.org/docs/advanced/AsyncActions.html
    • Sie können testen, ob durch Zugabe debugger, schön
    InformationsquelleAutor Alberto Centelles
Schreibe einen Kommentar