@ngrx/store#ActionReducer TypeScript Examples

export function logger(reducer: ActionReducer<RootState>): ActionReducer<RootState> {
  return (state, action) => {
    const result = reducer(state, action);
    /* console.groupCollapsed(action.type);
     console.log('Previous state', state);
     console.log('Action', action);
     console.log('Next state', result);
     console.groupEnd(); */
    return result;
  };
}

// console.log all actions
export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return (state, action) => {
    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
  }
}

reducer: ActionReducer<CommonDataStoreState, Action> =
    createReducer(
        INIT_COMMON_DATA_STORE_STATE,
        on(
            actions.setKernelStatsDataAction,
            (state: CommonDataStoreState, action: ActionCreatorAny) => {
              return {
                ...state,
                kernelStatsData: action.kernelStatsData,
              };
            },
            ),
    )

export function initStateFromLocalStorage(
  reducer: ActionReducer<AppState>
): ActionReducer<AppState> {
  return function (state, action) {
    const newState = reducer(state, action);
    if ([INIT.toString(), UPDATE.toString()].includes(action.type)) {
      return { ...newState, ...LocalStorageService.loadInitialState() };
    }
    return newState;
  };
}

export function debug(
  reducer: ActionReducer<AppState>
): ActionReducer<AppState> {
  return function (state, action) {
    const newState = reducer(state, action);
    console.log(`[DEBUG] action: ${action.type}`, {
      payload: (<any>action).payload,
      oldState: state,
      newState
    });
    return newState;
  };
}

export function createReducer(asyncReducers = {}): ActionReducer<any> {
  const actionReducer = compose(
    localStorageSync({
      keys: [],
      rehydrate: true,
    }),
    combineReducers,
  )(Object.assign(reducers, asyncReducers));

  return function(state: any, action: any) {
    // Reset state
    if (action.type === authenticationActions.LOGOUT_SUCCESS) {
      return actionReducer(undefined, action);
    }
    return actionReducer(state, action);
  };
}

createSearchReducer = (entityName: string, reducer?: ActionReducer<SearchState>) => {
  return function(state: SearchState = initialState, action: SearchAction): SearchState {
    switch (action.type) {
      case `[${entityName}] Search`: {
        const fetchRequest: FetchRequest = action.payload;

        return Object.assign({}, state, {
          fetchRequest,
          loading: true,
          entities: [],
        });
      }

      case `[${entityName}] Search Complete`: {
        const searchResult: SearchResult = action.payload;

        return Object.assign({}, state, {
          entities: searchResult.elements,
          totalElements: searchResult.totalElements,
          totalPages: searchResult.totalPages,
          loading: false,
        });
      }

      default: {
        // delegate to wrapped reducer
        if (reducer) {
          return reducer(state, action);
        }
        return state;
      }
    }
  };
}

createFormReducer = (resource: string, reducer?: ActionReducer<FormState>) => {
  return function(state: FormState = initialState, action: FormAction): FormState {
    switch (action.type) {
      case `[${resource}] Create Fail`:
      case `[${resource}] Update Fail`: {
        return Object.assign({}, state, {
          error: action.payload,
        });
      }

      case `[${resource}] Reset Form`:
      case `[${resource}] Create Success`:
      case `[${resource}] Update Success`: {
        return initialState;
      }

      default: {
        // delegate to wrapped reducer
        if (reducer) {
          return reducer(state, action);
        }
        return state;
      }
    }
  };
}

resettingMetaReducer = (
  reducer: ActionReducer<any>
): ActionReducer<any> => {
  return (state, action) => {
    if (action.type === reset.type) {
      return reducer(undefined, action);
    }
    return reducer(state, action);
  };
}

loggingMetaReducer = (
  reducer: ActionReducer<any>
): ActionReducer<any> => {
  return (state, action) => {
    console.log('current state', state);
    console.log('action', action);
    // execute the actual reducer
    const nextState = reducer(state, action);
    console.log('next state', nextState);
    return nextState;
  };
}

hydrationMetaReducer = (
  reducer: ActionReducer<unknown>
): ActionReducer<unknown> => {
  return (state, action) => {
    if (isHydrateSuccess(action)) {
      return action.state;
    } else {
      return reducer(state, action);
    }
  };
}

// console.log all actions
export function logger(reducer: ActionReducer<State>): ActionReducer<State> {
  return (state, action) => {
    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;
  };
}

productionReducer: ActionReducer<any> = createReducer()

export function logger(reducer: ActionReducer<State>): ActionReducer<any, any> {
  return function(state: State, action: any): State {
    if (action.type === '[Common] Do Clear') {
      state = undefined;
    }
    return reducer(state, action);
  };
}

export function logger(reducer: ActionReducer<State>): ActionReducer<any, any> {
  return function(state: State, action: any): State {
    return reducer(state, action);
  };
}

reducer: ActionReducer<TensorflowStatsState, Action> =
    createReducer(
        INIT_TENSORFLOW_STATS_STATE,
        on(
            actions.setDataAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                data: action.data,
              };
            },
            ),
        on(
            actions.setDiffDataAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                diffData: action.diffData,
              };
            },
            ),
        on(
            actions.setHasDiffAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                hasDiff: action.hasDiff,
              };
            },
            ),
        on(
            actions.setShowPprofLinkAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showPprofLink: action.showPprofLink,
              };
            },
            ),
        on(
            actions.setShowFlopRateChartAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showFlopRateChart: action.showFlopRateChart,
              };
            },
            ),
        on(
            actions.setShowModelPropertiesAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                showModelProperties: action.showModelProperties,
              };
            },
            ),
        on(
            actions.setTitleAction,
            (state: TensorflowStatsState, action: ActionCreatorAny) => {
              return {
                ...state,
                title: action.title,
              };
            },
            ),
    )

createResourceReducer = (
  resourceId: string,
  reducer?: ActionReducer<ResourceState>,
  identifierName: string = 'identifier',
) => {
  const identifier = (resource: any) => resource[identifierName];

  return function(state: ResourceState = initialState, action: ResourceAction): ResourceState {
    switch (action.type) {
      case `[${resourceId}] Load`: {
        const resource = action.payload.resource;

        const newIds = state.ids.filter(id => id !== identifier(resource));

        return {
          ids: [...newIds, identifier(resource)],
          entities: Object.assign({}, state.entities, {
            [identifier(resource)]: resource,
          }),
          selectedId: state.selectedId,
          loadedAt: Object.assign({}, state.entities, {
            [identifier(resource)]: Date.now(),
          }),
        };
      }

      case `[${resourceId}] Select`: {
        return Object.assign({}, state, {
          selectedId: action.payload,
        });
      }

      case `[${resourceId}] Create Success`: {
        const resource = action.payload.resource;

        return {
          ids: [...state.ids, identifier(resource)],
          entities: Object.assign({}, state.entities, {
            [identifier(resource)]: resource,
          }),
          selectedId: state.selectedId,
          loadedAt: state.loadedAt,
        };
      }

      case `[${resourceId}] Update Success`: {
        const resource = action.payload.resource;

        return {
          ids: state.ids,
          entities: Object.assign({}, state.entities, {
            [identifier(resource)]: resource,
          }),
          selectedId: state.selectedId,
          loadedAt: state.loadedAt,
        };
      }

      case `[${resourceId}] Delete Success`: {
        const resource = action.payload.resource;

        const newIds = state.ids.filter(id => id !== identifier(resource));

        const newEntities = newIds.reduce((entities: { [id: string]: any }, id: string) => {
          const entity = state.entities[id];
          return Object.assign(entities, {
            [identifier(entity)]: entity,
          });
        }, {});

        const newLoadedAt = newIds.reduce((entities: { [id: string]: any }, id: string) => {
          const loadedAt = state.loadedAt[id];
          return Object.assign(entities, {
            [id]: loadedAt,
          });
        }, {});

        return {
          ids: [...newIds],
          entities: newEntities,
          loadedAt: newLoadedAt,
          selectedId: state.selectedId,
        };
      }

      default: {
        // delegate to wrapped reducer
        if (reducer) {
          return reducer(state, action);
        }
        return state;
      }
    }
  };
}

reducer: ActionReducer<AppState, Action> = createReducer(
    INIT_APP_STATE,
    on(
        actions.setActiveHeapObjectAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            memoryViewerState: {
              ...state.memoryViewerState,
              activeHeapObject: action.activeHeapObject,
            }
          };
        },
        ),
    on(
        actions.setActiveOpProfileNodeAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            opProfileState: {
              ...state.opProfileState,
              activeOpProfileNode: action.activeOpProfileNode,
            }
          };
        },
        ),
    on(
        actions.setActivePodViewerInfoAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            podViewerState: {
              ...state.podViewerState,
              activePodViewerInfo: action.activePodViewerInfo,
            }
          };
        },
        ),
    on(
        actions.setCapturingProfileAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            capturingProfile: action.capturingProfile,
          };
        },
        ),
    on(
        actions.setLoadingStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            loadingState: action.loadingState,
          };
        },
        ),
    on(
        actions.setCurrentToolStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            currentTool: action.currentTool,
          };
        },
        ),
    on(
        actions.setToolsInfoStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            toolsInfoState: action.toolsInfoState,
          };
        },
        ),
    on(
        actions.setDataRequestStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            dataRequest: action.dataRequest,
          };
        },
        ),
    on(
        actions.clearExportAsCsvStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            exportAsCsv: '',
          };
        },
        ),
    on(
        actions.setExportAsCsvStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            exportAsCsv: action.exportAsCsv,
          };
        },
        ),
    on(
        actions.setErrorMessageStateAction,
        (state: AppState, action: ActionCreatorAny) => {
          return {
            ...state,
            errorMessage: action.errorMessage,
          };
        },
        ),
)