如何重置Redux存储的状态?

我正在使用Redux进行状态管理。如何将存储重置为初始状态?

例如，假设我有两个用户帐户(u1和u2)。想象下面的一系列事件:

用户u1登录到应用程序并做了一些事情，所以我们在存储中缓存一些数据。用户u1退出。用户u2无需刷新浏览器即可登录应用。

此时，缓存的数据将与u1关联，我想清理它。

当第一个用户注销时，如何将Redux存储重置为初始状态?

当前回答

NGRX4更新

如果您正在迁移到NGRX 4，您可能已经从迁移指南中注意到用于组合reducer的rootreducer方法已经被ActionReducerMap方法所取代。起初，这种新的做事方式可能会使重置状态成为一个挑战。它实际上很简单，但这样做的方式已经改变了。

这个解决方案的灵感来自NGRX4 Github文档的元还原器API部分。

首先，让我们假设你正在使用NGRX的新ActionReducerMap选项像这样组合你的reducer:

//index.reducer.ts
export const reducers: ActionReducerMap<State> = {
    auth: fromAuth.reducer,
    layout: fromLayout.reducer,
    users: fromUsers.reducer,
    networks: fromNetworks.reducer,
    routingDisplay: fromRoutingDisplay.reducer,
    routing: fromRouting.reducer,
    routes: fromRoutes.reducer,
    routesFilter: fromRoutesFilter.reducer,
    params: fromParams.reducer
}

现在，假设你想从app。module内部重置状态

//app.module.ts
import { IndexReducer } from './index.reducer';
import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
...
export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
    return function(state, action) {

      switch (action.type) {
          case fromAuth.LOGOUT:
            console.log("logout action");
            state = undefined;
      }
  
      return reducer(state, action);
    }
  }

  export const metaReducers: MetaReducer<any>[] = [debug];

  @NgModule({
    imports: [
        ...
        StoreModule.forRoot(reducers, { metaReducers}),
        ...
    ]
})

export class AppModule { }

这基本上是用NGRX 4达到同样效果的一种方法。

2017-09-07 15:22:31

其他回答

为什么不直接使用return module.exports.default();)

export default (state = {pending: false, error: null}, action = {}) => {
    switch (action.type) {
        case "RESET_POST":
            return module.exports.default();
        case "SEND_POST_PENDING":
            return {...state, pending: true, error: null};
        // ....
    }
    return state;
}

注意:确保你设置动作默认值为{}，你是可以的，因为你不想在检查动作时遇到错误。在switch语句中输入。

2016-12-02 17:08:30

只是对@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);
};

2018-03-13 01:56:26

onLogout () { this.props.history.push(' /登录');//发送用户到登录页面 window.location.reload ();//刷新页面｝

2019-10-31 19:46:28

如果你想重置一个减速机

例如

const initialState = { isLogged:假｝ //这将是你的行动 export const resetReducer = () => { 返回{ 类型:“重置” ｝｝导出默认值(state = initialState， { 类型, 有效载荷 }) => { 开关(类型){ //你的行动会报应到她头上例“重置”: 返回{ initialState… ｝｝｝ //从你的前端调度(resetReducer ())

2020-07-18 07:42:02