我正在使用Redux进行状态管理。 如何将存储重置为初始状态?
例如，假设我有两个用户帐户(u1和u2)。 想象下面的一系列事件:
用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。 用户u1退出。 用户u2无需刷新浏览器即可登录应用。
此时，缓存的数据将与u1关联，我想清理它。
当第一个用户注销时，如何将Redux存储重置为初始状态?
当前回答
只是对@dan-abramov答案的扩展，有时我们可能需要保留某些被重置的键。
const retainKeys = ['appConfig'];
const rootReducer = (state, action) => {
if (action.type === 'LOGOUT_USER_SUCCESS' && state) {
state = !isEmpty(retainKeys) ? pick(state, retainKeys) : undefined;
}
return appReducer(state, action);
};
其他回答
除了Dan Abramov的回答之外，我们是否应该明确地将action设置为action = {type: '@@INIT'}以及state = undefined。采用上述动作方式，各减速器均返回初始状态。
如果你正在使用还原动作，这里有一个快速的解决方案，使用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)，但我不能容忍它，因为我喜欢元编程。
定义一个动作:
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”。通过这种方式，存储注销和重置将同步发生，您的存储将为另一个用户登录做好准备。
我已经创建了一个组件来给Redux重置状态的能力，你只需要使用这个组件来增强你的存储和分派一个特定的动作。类型触发重置。执行的想法和Dan Abramov在他们的回答中说的是一样的。
Github: https://github.com/wwayne/redux-reset
另一种选择是:
store.dispatch({type: '@@redux/INIT'})
'@@redux/INIT'是redux自动调度的动作类型，当你创建存储时，所以假设你的reducers都有一个默认值，这将被那些捕获，并开始你的状态新鲜。不过，它可能被认为是redux的私有实现细节，所以买家要小心……
