我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
你可以通过将此代码添加到动作文件中来清空减速器的数据，
首先导入所有类型:
import * as types from './types';
将此代码添加到注销操作
for(let key of Object.values(types)) {
dispatch({ type: key, payload: [] });
}
其他回答
为了将状态重置为初始状态，我编写了以下代码:
const appReducers = (state, action) =>
combineReducers({ reducer1, reducer2, user })(
action.type === "LOGOUT" ? undefined : state,
action
);
我在使用typescript时的解决方案，建立在Dan Abramov的答案之上(redux类型使得不可能将undefined作为第一个参数传递给reducer，所以我将初始根状态缓存在一个常量中):
// store
export const store: Store<IStoreState> = createStore(
rootReducer,
storeEnhacer,
)
export const initialRootState = {
...store.getState(),
}
// root reducer
const appReducer = combineReducers<IStoreState>(reducers)
export const rootReducer = (state: IStoreState, action: IAction<any>) => {
if (action.type === "USER_LOGOUT") {
return appReducer(initialRootState, action)
}
return appReducer(state, action)
}
// auth service
class Auth {
...
logout() {
store.dispatch({type: "USER_LOGOUT"})
}
}
简单回答一下丹·阿布拉莫夫的问题:
const rootReducer = combineReducers({
auth: authReducer,
...formReducers,
routing
});
export default (state, action) =>
rootReducer(action.type === 'USER_LOGOUT' ? undefined : state, action);
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 RESET_ACTION = {
type: "RESET"
}
然后在每个减速器中假设您使用switch或if-else通过每个减速器处理多个动作。我要拿开关的箱子。
const INITIAL_STATE = {
loggedIn: true
}
const randomReducer = (state=INITIAL_STATE, action) {
switch(action.type) {
case 'SOME_ACTION_TYPE':
//do something with it
case "RESET":
return INITIAL_STATE; //Always return the initial state
default:
return state;
}
}
这样当你调用RESET动作时，你的reducer就会用默认状态更新存储。
现在，注销，你可以处理如下:
const logoutHandler = () => {
store.dispatch(RESET_ACTION)
// Also the custom logic like for the rest of the logout handler
}
每次用户登录时，不需要刷新浏览器。Store将始终处于默认状态。
store.dispatch(RESET_ACTION)只是详细阐述了这个思想。你很可能会有一个用于此目的的动作创建者。更好的方法是使用LOGOUT_ACTION。
一旦分派了这个LOGOUT_ACTION。然后，一个自定义中间件可以用Redux-Saga或Redux-Thunk拦截这个动作。然而，这两种方法都可以分派另一个动作“RESET”。通过这种方式，存储注销和重置将同步发生，您的存储将为另一个用户登录做好准备。
