如何重置 Redux 商店的状态？答案

【问题标题】：How to reset the state of a Redux store?如何重置 Redux 商店的状态？
【发布时间】：2016-06-07 22:46:47
【问题描述】：

我正在使用 Redux 进行状态管理。
如何将商店重置为初始状态？

例如，假设我有两个用户帐户（u1 和 u2）。
想象以下事件序列：

用户u1 登录到应用程序并执行一些操作，因此我们在存储中缓存了一些数据。
用户u1 注销。
用户u2无需刷新浏览器即可登录应用。

此时缓存的数据会关联到u1，我想清理一下。

如何在第一个用户注销时将 Redux 存储重置为其初始状态？

【问题讨论】：

最好在注销时清除状态（从安全角度来看）
对于 redux 工具包：How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?

标签： javascript redux store redux-store

【解决方案1】：

如果你想重置单个reducer

例如

const initialState = {
  isLogged: false
}
//this will be your action
export const resetReducer = () => {
  return {
    type: "RESET"
  }
}

export default (state = initialState, {
  type,
  payload
}) => {
  switch (type) {
    //your actions will come her
    case "RESET":
      return {
        ...initialState
      }
  }
}

//and from your frontend
dispatch(resetReducer())

【讨论】：

【解决方案2】：

使用 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);
};

【讨论】：

这个解决方案对我有用，只需少量更改。我需要添加 undefined 作为状态的可选类型，因此它可以与 configureStore "state: ReturnType | undefined" 一起使用

【解决方案3】：

您可以通过将此代码添加到操作文件中来使化简器的数据为空，

先导入所有类型：

import * as types from './types';

将此代码添加到注销操作

for(let key of Object.values(types)) {
        dispatch({ type: key, payload: [] });
    }

【讨论】：

我认为为每个存储键调度一个动作来重置每个状态有点过头了。其他与 root reducer 相关的解决方案看起来更好。

【解决方案4】：

npm install redux-reset
import reduxReset from 'redux-reset'
...
const enHanceCreateStore = compose(
    applyMiddleware(...),
    reduxReset()  // Will use 'RESET' as default action.type to trigger reset
  )(createStore)
const store = enHanceCreateStore(reducers)

https://github.com/wwayne/redux-reset

【讨论】：

【解决方案5】：

只需编辑声明减速器的文件

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;

【讨论】：

【解决方案6】：

使用 Redux 工具包的方法：


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);
};

【讨论】：