在 Angular 中使用 ngrx 进行状态管理时，控制台记录状态数据答案

【问题标题】：Console log the state data when using ngrx for State Management in Angular在 Angular 中使用 ngrx 进行状态管理时，控制台记录状态数据
【发布时间】：2019-03-16 22:54:18
【问题描述】：

在 Angular 应用程序中使用 ngrx 进行状态管理时，任何人都可以建议如何控制台记录状态。我已经浏览了ngrx-store-logger，但文档不清楚如何创建元减速器和使用这个库。

【问题讨论】：

标签： ngrx ngrx-store

【解决方案1】：

这可以通过元减速器来完成，如NgRx example app所示

export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return (state: State, action: any): any => {
    const result = reducer(state, action);
    console.groupCollapsed(action.type);
    console.log('prev state', state);
    console.log('action', action);
    console.log('next state', result);
    console.groupEnd();

    return result;
  };
}

/**
 * By default, @ngrx/store uses combineReducers with the reducer map to compose
 * the root meta-reducer. To add more meta-reducers, provide an array of meta-reducers
 * that will be composed to form the root meta-reducer.
 */
export const metaReducers: MetaReducer<State>[] = !environment.production
  ? [logger, storeFreeze]
  : [];

【讨论】：