我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
为了将状态重置为初始状态，我编写了以下代码:
const appReducers = (state, action) =>
combineReducers({ reducer1, reducer2, user })(
action.type === "LOGOUT" ? undefined : state,
action
);
其他回答
使用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);
};
丹·阿布拉莫夫的回答帮我破案了。然而，我遇到了一个案例，并不是整个州都需要清理。所以我是这样做的:
const combinedReducer = combineReducers({
// my reducers
});
const rootReducer = (state, action) => {
if (action.type === RESET_REDUX_STATE) {
// clear everything but keep the stuff we want to be preserved ..
delete state.something;
delete state.anotherThing;
}
return combinedReducer(state, action);
}
export default rootReducer;
我已经创建了清除状态的操作。因此，当我分派登出动作创建者时，我也分派动作来清除状态。
用户记录动作
export const clearUserRecord = () => ({
type: CLEAR_USER_RECORD
});
注销操作创建器
export const logoutUser = () => {
return dispatch => {
dispatch(requestLogout())
dispatch(receiveLogout())
localStorage.removeItem('auth_token')
dispatch({ type: 'CLEAR_USER_RECORD' })
}
};
减速机
const userRecords = (state = {isFetching: false,
userRecord: [], message: ''}, action) => {
switch (action.type) {
case REQUEST_USER_RECORD:
return { ...state,
isFetching: true}
case RECEIVE_USER_RECORD:
return { ...state,
isFetching: false,
userRecord: action.user_record}
case USER_RECORD_ERROR:
return { ...state,
isFetching: false,
message: action.message}
case CLEAR_USER_RECORD:
return {...state,
isFetching: false,
message: '',
userRecord: []}
default:
return state
}
};
我不确定这是否是最佳的?
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文档。
只需编辑声明约简的文件
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;
