你可以，还是应该在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

终极版createStore第二个参数是用于存储库初始化：

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

所以，你可以做这样的事情：

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

const store = createStore(mainReducer, initialState); 

由于减速应该是纯函数，即没有副作用，而且localStorage.setItem是一个副作用，那肯定会伤害到测试，你应该避免在reducer中保存到localStorage。 相反，您可以：

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

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

会发生这种情况时状态的变化，所以它可能会影响性能。

另一种选择是保存使用onBeforeUnload只有当页面被关闭的状态（更新计数）：

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

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