React+Redux项目路由切换后Store状态丢失问题求助

我来帮你一步步排查这个问题，结合你贴的代码，先看几个最可能的原因：

1. 先确认tokenReducer的实现逻辑 #

你只贴了combineReducers的代码，但没给出tokenReducer的具体实现——这很可能是问题的核心！如果reducer没有正确处理TOKEN_PUSH action，或者不小心返回了初始状态，就会导致token存不进去，或者看起来像是被重置了。

正确的tokenReducer示例：

// 初始状态
const initialState = {
  token: null
};

const tokenReducer = (state = initialState, action) => {
  switch (action.type) {
    case "TOKEN_PUSH":
      // 一定要返回新的状态对象，不能直接修改原state
      return {
        ...state,
        token: action.token
      };
    // 如果有退出登录的逻辑，再添加对应的case
    case "LOGOUT":
      return initialState;
    default:
      // 默认要返回原state，不能返回undefined或初始状态！
      return state;
  }
};

export default tokenReducer;

如果你的reducer在default分支不小心返回了initialState，或者TOKEN_PUSH分支没有正确返回带token的新状态，就会导致状态无法被正确保存。

2. 检查Store是否被重复创建 #

从你的Index.js看，store是在全局创建后传给App组件的，这没问题，但要警惕以下两种情况：

• 有没有在其他地方（比如App组件的constructor或render里）重新创建了store？如果有，每次渲染都会生成新的store实例，之前的状态自然就没了。
• 开发环境下的热加载（HMR）是否正确处理了store？如果没有配置热加载时保留store状态，代码更新后store会被重置。可以在Index.js里添加以下代码：

if (module.hot) {
  module.hot.accept('./reducers', () => {
    const nextRootReducer = require('./reducers').default;
    store.replaceReducer(nextRootReducer);
  });
}

3. 排查是否有重复的Provider组件 #

如果你的某个子组件（比如Navigation或BooksPage）里又嵌套了一个Provider，并且传入了新的store实例，那么子组件会使用这个新store，看起来像是原store被重置了。检查所有组件，确保只有App里有一个全局的Provider。

4. 验证状态是否真的被重置，还是只是没正确获取 #

有时候可能不是store被重置，而是组件没有正确连接Redux。可以在Index.js里添加状态监听，实时查看store的变化：

// 在store创建后添加这段代码
store.subscribe(() => {
  console.log("当前Store状态:", store.getState());
});

这样你可以在登录后、导航后分别查看store的状态，确认是token被清空，还是整个store都回到了初始状态，这能帮你更快定位问题。

5. 检查是否有其他Action意外清空了状态 #

查看你的各个saga和reducer，有没有某个action（比如页面初始化的action）不小心重置了整个store或token状态。比如某个saga在页面加载时dispatch了一个重置状态的action，而你没注意到。

内容的提问来源于stack exchange，提问作者Dawid W