Gdzie pisać do localStorage w aplikacji Redux?

Question

Chcę zachować niektóre części mojego drzewa stanu do localStorage. Jakie jest odpowiednie miejsce, aby to zrobić? Redukcja czy akcja?

Answer 1

Reduktor nigdy nie jest odpowiednim miejscem do tego, ponieważ reduktory powinny być czyste i nie powodować efektów ubocznych.

Polecam po prostu robi to w abonenta:

store.subscribe(() => { 
    // persist your state 
}) 

Przed utworzeniem sklepu, czytać te przetrwały części:

const persistedState = // ... 
const store = createStore(reducer, persistedState) 

Jeśli używasz combineReducers() zauważysz, że reduktory że raj t otrzyma stan będzie "bootować" normalnie, używając domyślnej wartości argumentu state. To może być bardzo przydatne.

Wskazane jest, aby porzucić subskrybenta, aby nie pisać zbyt szybko do localStorage lub wystąpią problemy z wydajnością.

Wreszcie, można utworzyć oprogramowanie pośrednie, które stanowi alternatywę, ale zacznę od subskrybenta, ponieważ jest to prostsze rozwiązanie i dobrze działa.

Answer 2

Jednym słowem: middleware.

Zapoznaj się z redux-persist. Lub napisz własny.

_{[UPDATE 18 gru 2016] Edytowane w celu usunięcia wzmianki o dwóch podobnych projektach, które są teraz nieaktywne lub przestarzałe.}

Answer 3

Aby wypełnić formularz odpowiedzi Dan Abramov mógłby użyć store.subscribe() takiego:

store.subscribe(()=>{ 
    localStorage.setItem('reduxState', JSON.stringify(store.getState())) 
}) 

Przed utworzeniem sklepu, sprawdź localStorage i analizować każdą JSON pod klucz jak ten:

const persistedState = localStorage.getItem('reduxState') ? JSON.parse(localStorage.getItem('reduxState')) : {} 

Następnie należy przekazać stałą peristedState do metody createStore w następujący sposób:

const store = createStore(
    reducer, 
    persistedState, 
    /* any middleware... */ 
) 

Answer 4

Jeśli ktoś ma jakikolwiek problem z powyższym, możesz napisać własne. Pozwól, że pokażę ci, co zrobiłem. Ignoruj: saga middleware rzeczy koncentrują się na dwóch metodach: localStorageMiddleware i reHydrateStore. localStorageMiddleware ciągnąć cały redux state i umieszcza go w local storage i rehydrateStore ciągnąć cały applicationState w pamięci lokalnej jeżeli są i umieszcza go w redux store

import {createStore, applyMiddleware} from 'redux' 
import createSagaMiddleware from 'redux-saga'; 
import decoristReducers from '../reducers/decorist_reducer' 

import sagas from '../sagas/sagas'; 

const sagaMiddleware = createSagaMiddleware(); 

/** 
* Add all the state in local storage 
* @param getState 
* @returns {function(*): function(*=)} 
*/ 
const localStorageMiddleware = ({getState}) => { // <--- FOCUS HERE 
    return (next) => (action) => { 
     const result = next(action); 
     localStorage.setItem('applicationState', JSON.stringify(
      getState() 
     )); 
     return result; 
    }; 
}; 


const reHydrateStore =() => { // <-- FOCUS HERE 

    if (localStorage.getItem('applicationState') !== null) { 
     return JSON.parse(localStorage.getItem('applicationState')) // re-hydrate the store 

    } 
} 


const store = createStore(
    decoristReducers, 
    reHydrateStore(),// <-- FOCUS HERE 
    applyMiddleware(
     sagaMiddleware, 
     localStorageMiddleware,// <-- FOCUS HERE 
    ) 
) 

sagaMiddleware.run(sagas); 

export default store;