Redux Thunk Rückruf nach dem Versenden einer Aktion?

Question

Also in meiner React Komponente, ich habe dies:

this.props.updateAlertCallback('error', ERROR_MESSAGE) 

Meine updateAlertCallback Aktion ist:

export const updateAlert = (alert, message) => { 
    return { 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    } 
} 

export const updateAlertCallback = (alert, message) => { 
    return dispatch => { 
    return dispatch(updateAlert(alert, message)).then(() => { 
     console.log('Done!'); 
    }); 
    } 
} 

ich die folgende Fehlermeldung erhalten: Uncaught Typeerror: Versand (...). dann ist keine Funktion

Was ist der richtige Weg, um etwas zu protokollieren, nachdem updateAlert ausgeführt wird?

Answer 1

function showAlert(message) { 
    return { 
    type: SHOW_ALERT, 
    message 
    }; 
} 

function hideAlert(message) { 
    return { 
    type: HIDE_ALERT, 
    }; 
} 

function flashAlert(message) { 
    return (dispatch) => { 
    dispatch(showAlert(message)); 
    setTimeout(() => { 
     dispatch(hideAlert()); 
    }, 5000); 
    } 
} 

Sie werden für diese arbeiten redux-Thunk müssen. Sie können dann this.props.flashAlert('Oh noes!!!!') mit der richtigen mapStateToProps verwenden. Außerdem werden Reduzierstücke und Reaktionskomponenten benötigt.

Fading ist nicht unbedingt eine einfache Reaktion. Ich schlage vor, Sie speichern das für später.

Was die flashAlert Funktion tut ist eine Funktion, die eine dispatch Funktion zurücknimmt. Diese Funktion macht allerlei lustige Dinge aber noch nicht. Zuerst wird diese Funktion an redux versandt. Diese Verteilung würde normalerweise ausgelöst, weil Aktionen einfache Objekte sein müssen. Aber weil du Redux-Thunk verwendest, wird es gut gehen. Redux-Thunk ruft diese Funktion auf und übergibt ihr die dispatch-Funktion von redux. Jetzt wird die Funktion endlich ausgeführt. Das erste, was es tut, ist eine Aktion zu versenden, die es unter showAlert() ruft. Diesmal ist es ein Objekt mit einer type Eigenschaft, was es zu einer richtigen Reduktion macht. Vermutlich wird redux diese Aktion an unseren Reducer weiterleiten, der den Status mit der neuen Nachricht aktualisieren wird, aber das wissen wir nicht genau, weil der Reducer aus dieser Antwort der Kürze halber weggelassen wurde. Wer weiß, welchen Code es enthält. Nachdem der Status geändert wurde, um die Nachricht irgendwie zu zeigen, machen wir eine setTimeout(). Wenn dieser Rückruf erfolgt, versenden wir eine weitere Aktion, die wir erhalten, indem wir hideAlert() unter Verwendung der gleichen dispatch Funktion aufrufen, die wir vorher verwendeten. Wir haben es immer noch. Dies wird vermutlich die Nachricht aus dem Zustand entfernen.

Redux wird reagieren, um die entsprechenden Komponenten erneut zu rendern, wenn sich der Status ändert. Vermutlich wird eine dieser Komponenten die Nachricht anzeigen oder nicht anzeigen, wie es der Fall sein mag.

Answer 2

Aktionen in Redux sind einfache Objekte. Redux thunk ermöglicht das Zurückgeben von Funktionen anstelle von Objekten. Diese Funktionen werden von der Thunk-Middleware ausgeführt, und letztendlich ist das endgültige Objekt, das den Speicher für den Versand erreicht, ein einfaches Objekt. Ein Beispiel für eine reduktive thunked Aktion ist unten.

export default class AccountActions { 

    static login(username, password) { 
    return (dispatch, getStore) => { 
     dispatch(AccountActions.loginRequest(username)); 
     fetch(apiUrls.signInUrl, { 
     method: 'POST', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json', 
     }, 
     body: JSON.stringify({ 
      user: { 
      email: username, 
      password: password, 
      } 
     }) 
     }) 
     .then(response => { 
     return response.json().then(responseJson => { 
      return dispatch(AccountActions.loginResponse(username, responseJson.token, response.status)); 
     }); 
     }) 
     .catch(err => { 
     console.error(err); 
     }); 
    }; 
    } 

    static loginRequest(username) { 
    return { 
     type: ActionTypes.loginRequest, 
     username, 
    }; 
    } 

    static loginResponse(username, token, status) { 
    return { 
     type: ActionTypes.loginResponse, 
     username, 
     token, 
     status, 
    }; 
    } 

} 

Answer 3

Redux-Thunk ist Ihre Antwort. In Ihrem Shop Codeänderung

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
); 

zu

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f, 
    applyMiddleware(thunk) 
); 

und Sie werden in der Lage sein Thunks Aktionen mit Ihrem redux zu verwenden.

Siehe https://github.com/gaearon/redux-thunk#installation

Answer 4

Mit redux-Thunk, können Sie Aktion zurückkehren ein Versprechen machen:

export const updateAlert = (alert, message) => (dispatch, getState) => { 
    dispatch ({ 
    type: 'UPDATE_ALERT', 
    alert, 
    message 
    }); 
    return Promise.resolve(getState()); 
    // or just Promise.resolve(); 

jetzt können Sie rufen updatealert (xx, xx) .then (newState => {.....});