ReduxのLocalStorageを使用して複数の状態を維持する

Question

LocalStorageを使用してReduxストアに複数の状態を維持する必要があります。私は既にドライバーである私のケースでは1つのキーを働いています。また、バスや運送会社の状態と関係があります。

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

私はダン・アブラモフ監督の例使用しています：Redux LocalStorageを。

LocalStorageをReduxストアで使用して複数の状態を保存する方法はありますか？良いアプローチですか、redux-persistのようなミドルウェアを使用していますか？

Answer 1

私は、store.subscribe関数でforEachオーバーステートを追加し、ストア全体を部分的に保存する必要があると思います。

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]) 
    }) 
});