我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
使用Redux，如果应用了以下解决方案，它假设我已经在所有的reducers(例如{user: {name, email}})中设置了initialState。在许多组件中，我检查这些嵌套的属性，所以有了这个修复，我防止我的渲染方法在耦合属性条件上被破坏(例如if state.user。如果上面提到的解决方案，电子邮件将抛出一个错误用户是未定义的)。
const appReducer = combineReducers({
tabs,
user
})
const initialState = appReducer({}, {})
const rootReducer = (state, action) => {
if (action.type === 'LOG_OUT') {
state = initialState
}
return appReducer(state, action)
}
其他回答
const reducer = (state = initialState, { type, payload }) => {
switch (type) {
case RESET_STORE: {
state = initialState
}
break
}
return state
}
你也可以触发一个动作，由所有或部分还原器处理，你想重置到初始存储。一个动作可以触发你整个状态的重置，或者只是适合你的一部分。我相信这是最简单、最可控的方法。
另一种选择是:
store.dispatch({type: '@@redux/INIT'})
'@@redux/INIT'是redux自动调度的动作类型，当你创建存储时，所以假设你的reducers都有一个默认值，这将被那些捕获，并开始你的状态新鲜。不过，它可能被认为是redux的私有实现细节，所以买家要小心……
Dan Abramov的答案没有做的一件事是为参数化选择器清除缓存。如果你有一个这样的选择器:
export const selectCounter1 = (state: State) => state.counter1;
export const selectCounter2 = (state: State) => state.counter2;
export const selectTotal = createSelector(
selectCounter1,
selectCounter2,
(counter1, counter2) => counter1 + counter2
);
然后你必须像这样在登出时释放它们:
selectTotal.release();
否则，最后一次调用选择器的记忆值和最后一个参数的值仍将在内存中。
代码示例来自ngrx文档。
除了Dan Abramov的回答之外，我们是否应该明确地将action设置为action = {type: '@@INIT'}以及state = undefined。采用上述动作方式，各减速器均返回初始状态。
使用Redux Toolkit和/或Typescript:
const appReducer = combineReducers({
/* your app’s top-level reducers */
});
const rootReducer = (
state: ReturnType<typeof appReducer>,
action: AnyAction
) => {
/* if you are using RTK, you can import your action and use it's type property instead of the literal definition of the action */
if (action.type === logout.type) {
return appReducer(undefined, { type: undefined });
}
return appReducer(state, action);
};
