Redux: Meinungen/Beispiele für die Backend-Persistenz?

Question

Ich wundere mich, wie Leute, die Redux verwenden, sich ihrer Backendpersistenz nähern. Speichern Sie insbesondere die "Aktionen" in einer Datenbank oder speichern Sie nur den letzten bekannten Status der Anwendung?

Wenn Sie die Aktionen speichern, fordern Sie sie einfach vom Server an, und wiederholen Sie dann alle, wenn eine bestimmte Seite geladen wird? Könnte dies nicht zu einigen Performance-Problemen mit einer groß angelegten App führen, bei der es viele Aktionen gibt?

Wenn Sie nur den "aktuellen Status" speichern, wie halten Sie diesen Status zu einem bestimmten Zeitpunkt tatsächlich fest, wenn Aktionen auf einem Client ausgeführt werden?

Hat jemand einige Codebeispiele, wie sie die Redux Reducer mit Backend-Speicher-Apis verbinden?

Ich weiß, dass dies eine sehr "typabhängige Frage" ist, aber ich denke nur über ein paar Ideen nach und versuche, ein Gefühl dafür zu bekommen, wie diese Art von "staatenloser" Architektur funktionieren könnte. Stapel Sinn.

Danke an alle.

Answer 1

Behalten Sie auf jeden Fall den Zustand Ihrer Reduzierstücke bei!

Wenn Sie stattdessen eine Folge von Aktionen beibehalten würden, könnten Sie Ihre Aktionen in Ihrem Frontend niemals ändern, ohne in Ihrer Produktdatenbank herumzuhantieren.

Beispiel: persistieren ein Minderer des Staates zu einem Server

Wir sind mit drei zusätzlichen Aktionstypen beginnen werden:

// actions: 'SAVE', 'SAVE_SUCCESS', 'SAVE_ERROR' 

I redux-thunk verwenden Asynchron-Server Anrufe zu tun: es bedeutet, dass eine Aktion Creator-Funktion kann dispatch zusätzliche Aktionen und überprüfen Sie den aktuellen Status.

Der Aktionsersteller save löst sofort eine Aktion aus (sodass Sie einen Spinner anzeigen oder die Schaltfläche "Speichern" in Ihrer Benutzeroberfläche deaktivieren können). Es sendet dann SAVE_SUCCESS oder eine SAVE_ERROR Aktionen, sobald die POST-Anforderung abgeschlossen ist.

var actionCreators = { 
    save:() => { 
    return (dispatch, getState) => { 
     var currentState = getState(); 
     var interestingBits = extractInterestingBitsFromState(currentState); 

     dispatch({type: 'SAVE'}); 

     window.fetch(someUrl, { 
     method: 'POST', 
     body: JSON.stringify(interestingBits) 
     }) 
     .then(checkStatus) // from https://github.com/github/fetch#handling-http-error-statuses 
     .then((response) => response.json()) 
     .then((json) => dispatch actionCreators.saveSuccess(json.someResponseValue)) 
     .catch((error) => 
     console.error(error) 
     dispatch actionCreators.saveError(error) 
    ); 
    } 
    }, 

    saveSuccess: (someResponseValue) => return {type: 'SAVE_SUCCESS', someResponseValue}, 

    saveError: (error) => return {type: 'SAVE_ERROR', error}, 

    // other real actions here 
}; 

(N. B. $.ajax wäre völlig anstelle des window.fetch Sachen arbeiten, ziehe ich einfach nicht die ganze jQuery für eine Funktion laden!)

Der Druckminderer hält nur den Überblick über alle ausstehenden Serveranfrage.

function reducer(state, action) { 
    switch (action.type) { 
    case 'SAVE': 
     return Object.assign {}, state, {savePending: true, saveSucceeded: null, saveError: null} 
     break; 
    case 'SAVE_SUCCESS': 
     return Object.assign {}, state, {savePending: false, saveSucceeded: true, saveError: false} 
     break; 
    case 'SAVE_ERROR': 
     return Object.assign {}, state, {savePending: false, saveSucceeded: false, saveError: true} 
     break; 

    // real actions handled here 
    } 
} 

Sie werden wahrscheinlich etwas mit dem someResponseValue tun wollen, die vom Server zurück kam - vielleicht ist es eine ID eines neu geschaffenen Einheit etc etc.

Ich hoffe, das hilft, ist es gut so gearbeitet weit für mich!