Reduxの初期状態でlocalStorageを使用できますか？予想通り例えば

Question

は...私がやっているの縮小版だ

export const user = (state = { 
    id: localStorage.getItem('id'), 
    name: localStorage.getItem('name'), 
    loggedInAt: null 
}, action) => { 
    case types.LOGIN: 
     localStorage.setItem('name', action.payload.user.name); 
     localStorage.setItem('id', action.payload.user.id); 
     return { ...state, ...action.payload.user } 

    default: 
     return { ...state, loggedInAt: Date.now() } 
} 

、デフォルトはのlocalStorageからの状態を返します。しかし、ページを更新すると、私のアプリケーションの状態は実際には空白になります。

Answer 1

ReduxのcreateStore第二のparamがストアの初期化のために意図されていますレデューサーは、純粋な機能、副作用、すなわちない、とlocalStorage.setItemする必要がありますので

const initialState = { 
    id: localStorage.getItem('id'), 
    name: localStorage.getItem('name'), 
    loggedInAt: null 
}; 

const store = createStore(mainReducer, initialState); 

：

createStore(reducer, [initialState], [enhancer]) 

ですから、このような何かを行うことができます副作用であり、それは間違いなくテストを傷つけるでしょう、あなたは減速器でlocalStorageに保存しないでください。 代わりにすることができます：それは、パフォーマンスに影響を与える可能性があるので

store.subscribe(() => { 
    const { id, name } = store.getState(); 

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
}); 

これは、いつでも状態変化が起こるのだろう。 ？あなたは `があなたべきどういう`

window.onbeforeunload =() => { 
    const { id, name } = store.getState(); 

    localStorage.setItem('name', name); 
    localStorage.setItem('id', id); 
};