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达到同样效果的一种方法。

简单回答一下丹·阿布拉莫夫的问题:

const rootReducer = combineReducers({
    auth: authReducer,
    ...formReducers,
    routing
});


export default (state, action) =>
  rootReducer(action.type === 'USER_LOGOUT' ? undefined : state, action);

一种方法是在应用程序中编写一个根减速器。

根减速机通常会将处理操作委托给combineReducers()生成的减速机。但是，无论何时它接收到USER_LOGOUT操作，它都会再次返回初始状态。

例如，如果你的根减速器是这样的:

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

你可以将它重命名为appReducer，并编写一个新的rootReducer委托给它:

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

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

现在我们只需要教新的rootReducer返回初始状态以响应USER_LOGOUT操作。如我们所知，无论操作如何，当调用以undefined作为第一个参数时，约简器都应该返回初始状态。让我们用这个事实来有条件地剥离累积状态，当我们把它传递给appReducer:

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

  return appReducer(state, action)
}

现在，每当USER_LOGOUT触发时，所有减约器都将重新初始化。它们还可以返回与初始值不同的值，因为它们可以检查动作。也要打字。

重申一下，完整的新代码是这样的:

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

你可以通过将此代码添加到动作文件中来清空减速器的数据，

首先导入所有类型:

import * as types from './types';

将此代码添加到注销操作

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

另一种选择是:

store.dispatch({type: '@@redux/INIT'})

'@@redux/INIT'是redux自动调度的动作类型，当你创建存储时，所以假设你的reducers都有一个默认值，这将被那些捕获，并开始你的状态新鲜。不过，它可能被认为是redux的私有实现细节，所以买家要小心……

只需将注销链接清除会话并刷新页面。您的商店不需要额外的代码。当您想要完全重置状态时，页面刷新是一种简单且易于重复的处理方法。