我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
另一种选择是:
store.dispatch({type: '@@redux/INIT'})
'@@redux/INIT'是redux自动调度的动作类型，当你创建存储时，所以假设你的reducers都有一个默认值，这将被那些捕获，并开始你的状态新鲜。不过，它可能被认为是redux的私有实现细节，所以买家要小心……
其他回答
为了避免Redux引用初始状态的相同变量，我的建议是:
// write the default state as a function
const defaultOptionsState = () => ({
option1: '',
option2: 42,
});
const initialState = {
options: defaultOptionsState() // invoke it in your initial state
};
export default (state = initialState, action) => {
switch (action.type) {
case RESET_OPTIONS:
return {
...state,
options: defaultOptionsState() // invoke the default function to reset this part of the state
};
default:
return state;
}
};
我已经创建了清除状态的操作。因此，当我分派登出动作创建者时，我也分派动作来清除状态。
用户记录动作
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的答案是正确的，除了我们在使用react-router-redux包时遇到了一个奇怪的问题。
我们的解决方案是不将状态设置为undefined，而是仍然使用当前的路由减速器。因此，如果您正在使用这个包，我建议实现下面的解决方案
const rootReducer = (state, action) => {
if (action.type === 'USER_LOGOUT') {
const { routing } = state
state = { routing }
}
return appReducer(state, action)
}
使用Redux Toolkit的方法:
export const createRootReducer = (history: History) => {
const rootReducerFn = combineReducers({
auth: authReducer,
users: usersReducer,
...allOtherReducers,
router: connectRouter(history),
});
return (state: Parameters<typeof rootReducerFn>[0], action: Parameters<typeof rootReducerFn>[1]) =>
rootReducerFn(action.type === appActions.reset.type ? 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"})
}
}
