webentwicklung-frage-antwort-db.com.de

Redux-Versandaktion nach einer anderen Aktion reagieren

Ich habe eine async -Aktion, die Daten aus der REST - API abruft:

export const list = (top, skip) => dispatch => {
    dispatch({ type: 'LIST.REQUEST' });

    $.get(API_URL, { top: top, skip: skip })
        .done((data, testStatus, jqXHR) => {
            dispatch({ type: 'LIST.SUCCESS', data: data });
        });
};

Eine sync action, die den skip-Status ändert:

export const setSkip = (skip) => {
    return {
        type: 'LIST.SET_SKIP',
        skip: skip
    };
};

Anfangszustand für top = 10, skip = 0. In der Komponente:

class List extends Component {
    componentDidMount() {        
        this.list();
    }

    nextPage() {
        let top = this.props.list.top;
        let skip = this.props.list.skip;

        // After this 
        this.props.onSetSkip(skip + top);

        // Here skip has previous value of 0.
        this.list();
        // Here skip has new value of 10.
    }

    list() {
        this.props.List(this.props.list.top, this.props.list.skip);
    }

    render () {
        return (
            <div>
                <table> ... </table>
                <button onClick={this.nextPage.bind(this)}>Next</button>
            </div>
        );
    }
}

Wenn Sie auf die Schaltfläche Weiter klicken, wird der Wert von skip, der die async-Aktion verwendet, nicht geändert Wie kann ich die Aktion nach sync action auslösen?

10
Denis Bednov

Danke für die Antworten, aber ich habe es so gemacht:

let top = this.props.list.top;
let skip = this.props.list.skip;
let newSkip = skip + top;

this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);

Zuerst berechne ich skip und setze eine asynchrone Aktion mit diesem neuen Wert ab. Dann schicke ich eine syns-Aktion, die skip im Status aktualisiert.

0
Denis Bednov

Können Sie die Funktion nicht nach einer Synchronisierungsaktion auslösen, sondern einfach die Funktion vom Reduzierer aus aufrufen?

Es folgt also dieser Fluss:

Synchronisationsaufruf -> Reducer-Aufruf ---> Fallfunktion (Reducer) ---> Case-Funktion (Reducer)

Anstelle des üblichen Flusses, der wahrscheinlich für Sie so ist:

Aktionsaufruf synchronisieren -> Anruf reduzieren

Befolgen Sie diese Anleitung, um die Reduzierungen aufzuteilen , um zu sehen, welche Reduzierungen der Fall sind.

Wenn die Aktion, die Sie auslösen möchten, Nebeneffekte hat, ist die korrekte Verwendung von Thunks die richtige Methode, und Sie können eine Aktion nach einer Aktion auslösen.

Beispiel für Thunks :

export const setSkip = (skip) => {
    return (dispatch, getState) => {

        dispatch(someFunc());
        //Do someFunc first then this action, use getState() for currentState if you want
        return {
            type: 'LIST.SET_SKIP',
            skip: skip
        };
    }
};
4
Martin Dawson

Wenn Sie redux thunk verwenden, können Sie sie problemlos kombinieren. Eine Middleware, mit der Aktionsersteller eine Funktion anstelle einer Aktion zurückgeben können. 

Ihre Lösung hat jetzt möglicherweise für Sie funktioniert, wenn Sie die Aktionsersteller nicht verketten müssen und nur beide ausführen müssen.

this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);

Wenn Sie eine Verkettung benötigen (synchron aufrufen) oder auf die Daten der ersten Aktion warten, würde ich Folgendes empfehlen.

export function onList(data) {
  return (dispatch) => {
          dispatch(ONLIST_REQUEST());
    return (AsyncAPICall)
    .then((response) => {
      dispatch(ONLIST_SUCCESS(response.data));
    })
    .catch((err) => {
      console.log(err);
    });
  };
}

export function setSkip(data) {
      return (dispatch) => {
              dispatch(SETSKIP_REQUEST());
        return (AsyncAPICall(data))
        .then((response) => {
          dispatch(SETSKIP_SUCCESS(response.data));
        })
        .catch((err) => {
          console.log(err);
        });
      };
    }

export function onListAndSetSkip(dataForOnList) {
  return (dispatch) => {
     dispatch(onList(dataForOnList)).then((dataAfterOnList) => {
       dispatch(setSkip(dataAfterOnList));
     });
  };
}
4
pierreg

auch diese auschecken redux-sequence-action

0
zarehb