Gdzie pisać do localStorage w aplikacji Redux?

Aby wypełnić puste pola odpowiedzi dana Abramova, możesz użyć store.subscribe() w następujący sposób:

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

Przed utworzeniem sklepu, sprawdź localStorage i przeanalizuj dowolny JSON pod Twoim kluczem w następujący sposób:

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

Następnie przekazujesz tę peristedState stałą do swojej metody createStore w następujący sposób:

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

Jednym słowem: middleware.

Sprawdź redux-persist . Albo napisz własną.

_{[UPDATE 18 Dec 2016] Edited to remove mention of two similar projects now inactive or deprecated.}

Jeśli ktoś ma jakiś problem z powyższymi rozwiązaniami, może napisać własne. Pokażę Ci, co zrobiłem. Ignoruj saga middleware rzeczy po prostu skup się na dwóch rzeczach localStorageMiddleware i reHydrateStore metoda. w tym celu należy pobrać wszystkie pliki z katalogu i umieścić je w local storage i rehydrateStore w lokalnym magazynie, jeśli są dostępne i umieścić je 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;

Nie mogę odpowiedzieć @Gardezi, ale opcja oparta na jego kodzie może być:

const rootReducer = combineReducers({
    users: authReducer,
});

const localStorageMiddleware = ({ getState }) => {
    return next => action => {
        const result = next(action);
        if ([ ACTIONS.LOGIN ].includes(result.type)) {
            localStorage.setItem(appConstants.APP_STATE, JSON.stringify(getState()))
        }
        return result;
    };
};

const reHydrateStore = () => {
    const data = localStorage.getItem(appConstants.APP_STATE);
    if (data) {
        return JSON.parse(data);
    }
    return undefined;
};

return createStore(
    rootReducer,
    reHydrateStore(),
    applyMiddleware(
        thunk,
        localStorageMiddleware
    )
);

Różnica polega na tym, że zapisujemy tylko niektóre akcje, możesz użyć funkcji debounce, aby zapisać tylko ostatnią interakcję twojego stanu