Redux: opinioni/esempi su come eseguire la persistenza back-end?

Question

Mi chiedo come la gente che usa Redux si stia avvicinando alla persistenza del backend. In particolare, stai memorizzando le "azioni" in un database o stai solo memorizzando l'ultimo stato conosciuto dell'applicazione?

Se si stanno salvando le azioni, le si richiede semplicemente dal server, quindi si riproducono tutte quando viene caricata una determinata pagina? Questo non potrebbe portare a problemi di prestazioni con un'app su larga scala dove ci sono molte azioni?

Se si sta memorizzando solo lo "stato corrente", in che modo si sta effettivamente persistendo questo stato in un dato momento in cui le azioni si verificano su un client?

Qualcuno ha alcuni esempi di codice di come stanno collegando i riduttori di ridondanza al backend di apis di memoria?

So che questa è una domanda tipo "dipende dalla tua app", ma sto solo riflettendo su alcune idee qui e sto cercando di capire come questa architettura "senza stato" possa funzionare in modo completo. senso dello stack.

Grazie a tutti.

Answer 1

Definitivamente persistono lo stato dei vostri riduttori!

Se hai persistito una sequenza di azioni, non saresti mai in grado di modificare le tue azioni nel frontend senza manipolare il database prod.

Esempio: persistere uno stato di riduttore a un server

Inizieremo con tre tipi di azione in più:

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

Io uso redux-thunk fare chiamate al server asincrona: significa che un'azione funzione creator può azioni aggiuntive dispatch e ispezionare lo stato corrente.

Il creatore di azioni save invia immediatamente un'azione (in modo che sia possibile mostrare una casella di selezione o disabilitare un pulsante "Salva" nell'interfaccia utente). Quindi invia le azioni SAVE_SUCCESS o SAVE_ERROR una volta completata la richiesta POST.

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 sarebbe totalmente lavorare al posto della roba window.fetch, ho appena preferisco non caricare l'intera jQuery per una funzione!)

Il riduttore appena registra ogni richiesta del server in sospeso.

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 
    } 
} 

Probabilmente si vorrà fare qualcosa con la someResponseValue che è tornato dal server - forse è un id di un'entità di nuova creazione ecc ecc

Spero che questo aiuta, ha funzionato bene così lontano per me!