如何重置Redux存储的状态?

2018-12-25  本文已影响186人  日不落000

参考 http://www.coderlord.com/javascript/5/6/7/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原则。

翻译自:https://stackoverflow.com/questions/35622588/how-to-reset-the-state-of-a-redux-store
转载注明原文:javascript – 如何重置Redux存储的状态?

上一篇下一篇

猜你喜欢

热点阅读