2016-11-28 3 views
4

So habe ich eine auth verwandten Minderer wie folgt aufgebaut:Wie Redux Aktion nach Erfolg einer anderen Aktion aufrufen?

export default function reducer(state = initialState, action = {}) { 
    switch (action.type) { 
    case LOAD: 
     return { 
     ...state, 
     loading: true, 
     } 
    case LOAD_SUCCESS: 
     return { 
     ...state, 
     loading: false, 
     loaded: true, 
     jwt: action.jwt, 
     } 
    case LOAD_FAIL: 
     return { 
     ...state, 
     loading: false, 
     loaded: false, 
     error: true, 
     errorMessage: action.error, 
     } 
    case LOGIN: 
     return { 
     ...state, 
     loaded: false, 
     loggingIn: true, 
     } 
    case LOGIN_SUCCESS: 
     return { 
     ...state, 
     loaded: true, 
     loggingIn: false, 
     jwt: jwtDecode(action.result.token), 
     } 
    case LOGIN_FAIL: 
     return { 
     ...state, 
     loggingIn: false, 
     user: null, 
     error: true, 
     errorMessage: action.error, 
     } 
    case LOGOUT: 
     return { 
     ...state, 
     loggingOut: true, 
     } 
    case LOGOUT_SUCCESS: 
     return { 
     ...state, 
     loggingOut: false, 
     user: null, 
     jwt: null, 
     } 
    case LOGOUT_FAIL: 
     return { 
     ...state, 
     loggingOut: false, 
     error: true, 
     errorMessage: action.error, 
     } 
    default: 
     return state 
    } 
} 

Wo LOAD das Laden der zuvor gespeicherten (entweder Cookie oder JWT) Auth und Login/Logout sind selbsterklärend.

Ich muss einige weitere Aktionen nach einem erfolgreichen LOAD oder LOGIN auslösen.

Ich möchte eine GET-Anfrage ausführen, um einige private Daten über den Benutzer zu erhalten, der nur nach der Anmeldung verfügbar ist, und speichert diese privaten Daten im Redux-Speicher, um von verschiedenen Teilen der Anwendung verwendet zu werden. Wie mache ich das?

+0

Haben Sie den Abschnitt [Async Actions] lesen (http://redux.js.org/docs/advanced/AsyncActions.html) in der Redux-Dokumentation? Das erklärt es ziemlich gut. –

Antwort

6

Sie sollten async actions verwenden, um dies zu erreichen.

Sie müssen Async-Aktionsersteller schreiben, der mehrere Aktionen aufruft.

So etwas:

function multipleAtions() { 
return (dispatch) => { 
    dispatch(load_action); 
    return fetch(`http://some_request_here`) 
      .then(() => dispatch(another_action); 
} 
} 
Verwandte Themen