6540DE35624567.html

关键代码

我想指出Dan Abramov接受的评论是正确的，除非我们在使用react-router-redux软件包以及这种方法
时遇到了一个奇怪的问题。我们的修复方法是不将状态设置为undefined但是而是仍然使用当前的路由
减少器。所以如果你使用这个包，我建议你实施下面的解决方案


const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    const { routing } = state
    state = { routing } 
  }
  return appReducer(state, action)
}

应用场景：
用户退出登录，情况相关缓存数据。

问题：
我使用Redux进行状态管理。
如何将存储重置为其初始状态？
例如，假设我有两个用户帐户(u1和u2)。
想象以下事件序列：

用户u1登录到应用程序并执行某些操作，因此我们在存储中缓存一些数据。
用户u1注销。
用户u2登录到应用程序，而不刷新浏览器。

在这一点上，缓存的数据将与u1关联，我想清理它。

当第一个用户注销时，如何将Redux存储重置为其初始状态？

最佳答案：
一种方法是用手写一个根reducer。

根reducer通常委托处理由combineReducers()生成的reducer的动作。但是，每当它接收到USER_LOGOUT操作时，它就会重新返回初始状态。

例如，如果你的root reducer看起来像这样：

const rootReducer = combineReducers({
  /* your app’s top-level reducers */
})

你可以将它重命名为appReducer并写一个新的rootReducer委托给它：

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  return appReducer(state, action)
}

现在我们只需要教新的rootReducer在USER_LOGOUT操作后返回初始状态。正如我们知道的，reducers应该返回初始状态，当它们以undefined作为第一个参数被调用时，不管操作。让我们使用这个事实有条件地剥离累积状态，我们将它传递给appReducer：

 const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined
  }

  return appReducer(state, action)
}

现在，每当USER_LOGOUT触发时，所有reducers都将重新初始化。他们也可以返回不同于他们最初想要的东西，因为他们可以检查action.type以及。

重申，全新的代码如下所示：

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    state = undefined
  }

  return appReducer(state, action)
}

注意，我不是在这里改变状态，我只是reassigning the reference的一个局部变量，称为状态，然后传递给另一个函数。改变状态对象将违反Redux原则。