如何重置Redux存储的状态？

Question

如何重置Redux存储的状态？我正在使用Redux进行州管理。如何将存储重置为初始状态？例如，假设我有两个用户帐户(u1和u2).设想以下一系列事件：用户u1登录应用程序并做一些事情，所以我们在商店中缓存一些数据。用户u1注销。用户u2登录到应用程序而不刷新浏览器。此时，缓存的数据将与u1我想把它清理干净。当第一个用户注销时，我如何将Redux存储重置为它的初始状态？

Answer 1

我想指出的是，丹阿布拉莫夫接受的评论是正确的，但我们遇到了一个奇怪的问题，当使用的反应路由器-Redux包连同这种方法。我们的解决办法是不将状态设置为undefined而是仍然使用当前的路由减少器。因此，如果您正在使用这个包，我建议您实现下面的解决方案

const rootReducer = (state, action) => {
  if (action.type === 'USER_LOGOUT') {
    const { routing } = state
    state = { routing } 
  }
  return appReducer(state, action)}

Answer 2

定义一个行动：

const RESET_ACTION = {
  type: "RESET"}

那么在每个减速机中，假设你使用的是switch或if-else通过每个减速机处理多个动作。我要接这个案子switch.

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操作时，还原程序将以默认状态更新存储。

现在，对于注销，您可以处理以下内容：

const logoutHandler = () => {
    store.dispatch(RESET_ACTION)
    // Also the custom logic like for the rest of the logout handler}

每次用户登录时，不需要刷新浏览器。商店总是默认的。

store.dispatch(RESET_ACTION)只是详细阐述了这个想法。您很可能为此目的有一个动作创建者。一个更好的方法就是LOGOUT_ACTION.

一旦你发出这个LOGOUT_ACTION..然后，定制中间件可以使用Redux-Saga或Redux-Thunk拦截此操作。但是，无论是哪种方式，您都可以分派另一个动作“重置”。这样，存储、注销和重置将同步进行，您的存储将为另一个用户登录做好准备。