反应样板保存本地状态答案

【问题标题】：react-boilerplate saving local state反应样板保存本地状态
【发布时间】：2017-12-29 15:37:34
【问题描述】：

使用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 应用程序的状态相匹配非常有用。

所以我的问题是，如何在屏幕刷新后保持状态，为什么初始状态会被减速器覆盖？

【问题讨论】：

标签： react-redux react-boilerplate

【解决方案1】：

原来我的一个 reducer 中有一个错字 - 返回的是初始状态，而不是默认操作的状态。

【讨论】：