Redux: Opinie/przykłady tego, jak zrobić utrwalanie backendu?

Question

Zastanawiam się, jak ludzie używający Redux zbliżają się do swojej trwałości zaplecza. W szczególności, czy przechowujesz "akcje" w bazie danych, czy przechowujesz tylko ostatni znany stan aplikacji?

Jeśli przechowujesz akcje, po prostu żądasz ich od serwera, a następnie odtwarzasz je wszystkie po załadowaniu danej strony? Czy nie może to prowadzić do problemów z wydajnością w przypadku aplikacji o dużej skali, w których występuje wiele działań?

Jeśli przechowujesz tylko "aktualny stan", w jaki sposób faktycznie utrzymujesz ten stan w dowolnym momencie, gdy działania mają miejsce na kliencie?

Czy ktoś ma jakieś przykłady kodu, w jaki sposób łączy reduktory redux z backend przechowywania apis?

Wiem, że jest to pytanie typu "zależy od twojej aplikacji", ale zastanawiam się nad niektórymi pomysłami i próbuję zrozumieć, jak tego rodzaju "bezpaństwowa" architektura może działać w pełnym zakresie. poczucie stosu.

Dziękuję wszystkim.

Answer 1

Zdecydowanie utrzymuj stan swoich reduktorów!

Jeśli zamiast tego zachowywałeś sekwencję działań, nigdy nie byłbyś w stanie modyfikować swoich działań w interfejsie użytkownika bez błądzenia w bazie danych prod.

Przykład: utrzymuje się stan jednego reduktora do serwera

Zaczniemy od trzech dodatkowych rodzajów działań:

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

używam redux-thunk zrobić wywołań serwera asynchroniczny: oznacza to, że jedna akcję Funkcja kreatora może dispatch dodatkowe akcje i sprawdzić aktualny stan.

Kreator akcji natychmiast wywołuje jedną akcję (aby pokazać spinner lub wyłączyć przycisk "zapisz" w interfejsie użytkownika). Następnie wywołuje akcje SAVE_SUCCESS lub SAVE_ERROR po zakończeniu żądania 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 
}; 

(nb $.ajax byłoby całkowicie pracować w miejscu window.fetch rzeczy, po prostu wolą nie załadować całość jQuery dla jednej funkcji!)

Reduktor tylko śledzi zaległych żądanie serwera.

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

Prawdopodobnie będziesz chciał zrobić coś z someResponseValue który wrócił z serwera - może to jest id nowo utworzonego podmiotu itp itd

Mam nadzieję, że to pomoże, to pracował ładnie tak daleko dla mnie!