Behalten Sie mehrere Zustände bei, indem Sie LocalStorage in Redux verwenden

Question

Ich muss mehrere Status in Redux speichern, die LocalStorage verwenden. Ich habe bereits einen Schlüssel in meinem Fall, es ist Treiber. müssen auch mit Bussen und Carrier-Staaten zu tun haben.

Store.js

import ReduxThunk from 'redux-thunk'; 
import { createStore, applyMiddleware, compose } from 'redux'; 
import Reducers from './reducers'; 
import { loadState, saveState } from '../../utils/localstorage'; 

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; 

// LOCAL STORAGE FOR DRIVERS, BUSES, CARRIERS 

const persistedState = loadState() 

const store = createStore(
    Reducers, 
    persistedState, 
    composeEnhancers(
    applyMiddleware(
     ReduxThunk 
    ) 
) 
); 

store.subscribe(() => { 
    saveState({ 
    drivers: store.getState().drivers 
    }); 
}); 

export default store; 

localstorage.js

export const loadState =() => { 
    try { 

    const serializedDriversState = localStorage.getItem('drivers') 

    if (serializedDriversState === null) { 
     return undefined; 
    } 
    return JSON.parse(serializedDriversState); 
    } catch (err) { 
    return undefined; 
    } 
}; 

export const saveState = (drivers) => { 
    try { 
    const serializedDriversState = JSON.stringify(drivers); 
    localStorage.setItem('drivers', serializedDriversState) 
    } catch (err) { 
    // Ignore errors. 
    } 
} 

Ich bin mit Dan Abramov Vorbild: Redux LocalStorage.

So, wie mehrere Staaten speichern mit LocalStorage in Redux speichern? Ist es ein guter Ansatz oder verwenden Sie eine Middleware wie redux-persist?

Answer 1

Ich denke, Sie sollten forEach über Status in storeScribe-Funktion hinzufügen und Sie können den gesamten Speicher teilweise speichern.

export const saveState = (key, data) => { 
    try { 
    const serialized = JSON.stringify(data); 
    localStorage.setItem(key, serialized); 
    } catch (err) { 
    // Ignore errors. 
    } 
} 

store.subscribe(() => { 
    const state = store.getState(); 
    Object.keys(state).forEach(key => { 
     saveState(key, state[key]) 
    }) 
});