如何重置 Redux 商店的状态？

一种方法是在应用程序中编写根化简器。

根化简器通常会将操作的处理委托给 由 生成的化简器。但是，每当它收到操作时，它会再次返回初始状态。combineReducers()USER_LOGOUT

例如，如果您的根化简器如下所示：

const rootReducer = combineReducers({
  /* your app’s top-level reducers */
})

您可以将其重命名为并编写新的委派：appReducerrootReducer

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

const rootReducer = (state, action) => {
  return appReducer(state, action)
}

现在，我们只需要教新人返回初始状态以响应操作。正如我们所知，无论操作如何，当它们被调用作为第一个参数时，都应该返回初始状态。让我们用这个事实有条件地剥离累积的，因为我们把它传递给：rootReducerUSER_LOGOUTundefinedstateappReducer

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

  return appReducer(state, action)
}

现在，每当触发时，所有化简器都将重新初始化。如果他们愿意，他们也可以返回与最初不同的内容，因为他们也可以检查。USER_LOGOUTaction.type

重申一下，完整的新代码如下所示：

const appReducer = combineReducers({
  /* your app’s top-level reducers */
})

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

  return appReducer(state, action)
}

如果您使用的是 redux-persist，则可能还需要清理存储。Redux-persist 在存储引擎中保留状态的副本，状态副本将在刷新时从那里加载。

首先，您需要导入相应的存储引擎，然后在将其设置为并清理每个存储状态键之前解析状态。undefined

const rootReducer = (state, action) => {
    if (action.type === SIGNOUT_REQUEST) {
        // for all keys defined in your persistConfig(s)
        storage.removeItem('persist:root')
        // storage.removeItem('persist:otherKey')

        return appReducer(undefined, action);
    }
    return appReducer(state, action);
};

Dan Abramov的答案是正确的，除了我们在使用react-router-redux软件包以及这种方法时遇到了一个奇怪的问题。

我们的解决方法是不将状态设置为，而是仍然使用当前的路由化简器。因此，如果您使用的是此软件包，我建议实现以下解决方案undefined

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