使用https://github.com/react-boilerplate/react-boilerplate v3.4.0 我希望在用户单击刷新按钮时保持状态元素。
我做了什么：在 app.js 我改变了
const initialState = {};
const store = configureStore(initialState, browserHistory);
至：
const initialState = loadState();
const store = configureStore(initialState, browserHistory);
其中persist.js 用于持久化state.global：
export const loadState = () => {
try {
const serializedState = localStorage.getItem('state');
if (serializedState === null) {
return undefined;
}
return JSON.parse(serializedState);
} catch (err) {
return undefined;
}
};
export const saveState = (state) => {
try {
const serializedState = JSON.stringify({ global: state.get('global').toJS()});
localStorage.setItem('state', serializedState);
} catch (err) {
console.log(err);
}
};在 store 返回之前的默认 store.js 中，我添加了：
store.subscribe(() => {
saveState(store.getState());
});
显然，这可以通过稍后的节流来改善。
所以发生的事情是在我验证状态后正确地保存到本地存储，并且正确地从本地存储重新加载。
当我在身份验证后刷新页面时，我开始跟踪 store.js：
在 createStore 运行之前，initialstate 是：
运行后：
const store = createStore(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers)
);store.getState() 返回：
所以它所做的是从减速器的初始状态中获取值。我不明白为什么会发生这种情况，正如 redux 文档所述：
您可以选择将初始状态指定为 createStore() 的第二个参数。这对于使客户端的状态与服务器上运行的 Redux 应用程序的状态相匹配非常有用。
所以我的问题是，如何在屏幕刷新后保持状态，为什么初始状态会被减速器覆盖？