我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
如果你正在使用还原动作，这里有一个快速的解决方案，使用HOF(高阶函数)为handleActions。
import { handleActions } from 'redux-actions';
export function handleActionsEx(reducer, initialState) {
const enhancedReducer = {
...reducer,
RESET: () => initialState
};
return handleActions(enhancedReducer, initialState);
}
然后使用handleActionsEx代替原来的handleActions来处理reducers。
Dan的回答给出了关于这个问题的一个很好的想法，但它对我来说并不是很有效，因为我使用的是还原坚持。 当使用redux-persist时，简单地传递未定义的状态不会触发持久化行为，所以我知道我必须手动从存储中删除项目(在我的情况下，React Native，因此AsyncStorage)。
await AsyncStorage.removeItem('persist:root');
or
await persistor.flush(); // or await persistor.purge();
对我也没用——他们只是对我大喊大叫。(例如，抱怨“意外的键_persist…”)
然后我突然思考，我想要的只是让每个减速机在遇到RESET动作类型时回到自己的初始状态。这样，持久化就被自然地处理了。显然没有上面的实用函数(handleActionsEx)，我的代码不会看起来很干(虽然它只是一个一行程序，即RESET: () => initialState)，但我不能容忍它，因为我喜欢元编程。
其他回答
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文档。
为了将状态重置为初始状态，我编写了以下代码:
const appReducers = (state, action) =>
combineReducers({ reducer1, reducer2, user })(
action.type === "LOGOUT" ? undefined : state,
action
);
只需编辑声明约简的文件
import { combineReducers } from 'redux';
import gets from '../';
const rootReducer = (state, action) => {
let asReset = action.type === 'RESET_STORE';
const reducers = combineReducers({
gets,
});
const transition = {
true() {
return reducers({}, action);
},
false() {
return reducers(state, action);
},
};
return transition[asReset] && transition[asReset]();
};
export default rootReducer;
如果你想重置一个减速机
例如
const initialState = { isLogged:假 ｝ //这将是你的行动 export const resetReducer = () => { 返回{ 类型:“重置” ｝ ｝ 导出默认值(state = initialState， { 类型, 有效载荷 }) => { 开关(类型){ //你的行动会报应到她头上 例“重置”: 返回{ initialState… ｝ ｝ ｝ //从你的前端 调度(resetReducer ())
下面的解决方案对我很有效。
我添加了重置状态功能到元还原器。关键在于使用
return reducer(undefined, action);
将所有减速器设置为初始状态。返回undefined反而会导致错误，因为存储的结构已经被破坏。
/还原剂index.ts
export function resetState(reducer: ActionReducer<State>): ActionReducer<State> {
return function (state: State, action: Action): State {
switch (action.type) {
case AuthActionTypes.Logout: {
return reducer(undefined, action);
}
default: {
return reducer(state, action);
}
}
};
}
export const metaReducers: MetaReducer<State>[] = [ resetState ];
app.module.ts
import { StoreModule } from '@ngrx/store';
import { metaReducers, reducers } from './reducers';
@NgModule({
imports: [
StoreModule.forRoot(reducers, { metaReducers })
]
})
export class AppModule {}
