参考 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存储的状态?
网友评论