Adding a Feature

src/app/core/pyb/features/my-feature/
├── my-feature.actions.ts
├── my-feature.reducer.ts     featureKey, State, initialState, createReducer + reducer wrapper
├── my-feature.selectors.ts
├── my-feature.effects.ts
├── my-feature.module.ts      StoreModule.forFeature + EffectsModule.forFeature
└── index.ts

// my-feature.enums.ts
export enum MyFeatureActionTypes {
    LoadMyFeature = '[MyFeature] Load',
    LoadMyFeatureSuccess = '[MyFeature] Load Success',
    LoadMyFeatureFailed = '[MyFeature] Load Failed',
}

// my-feature.actions.ts
import { createAction, props } from '@ngrx/store';
import { MyFeatureActionTypes } from './my-feature.enums';
import { MyFeatureData } from './my-feature.interfaces';

export const loadMyFeature = createAction(MyFeatureActionTypes.LoadMyFeature);

export const loadMyFeatureSuccess = createAction(
    MyFeatureActionTypes.LoadMyFeatureSuccess,
    props<{ data: MyFeatureData }>(),
);

export const loadMyFeatureFailed = createAction(MyFeatureActionTypes.LoadMyFeatureFailed);

// my-feature.reducer.ts
import { Action, createReducer, on } from '@ngrx/store';
import * as MyFeatureActions from './my-feature.actions';

export const myFeatureFeatureKey = 'myFeature';

export interface State {
    data: MyFeatureData | null;
    isLoading: boolean;
    hasError: boolean;
}

export const initialState: State = {
    data: null,
    isLoading: false,
    hasError: false,
};

const myFeatureReducer = createReducer(
    initialState,
    on(MyFeatureActions.loadMyFeature, state => ({ ...state, isLoading: true, hasError: false })),
    on(MyFeatureActions.loadMyFeatureSuccess, (state, { data }) => ({ ...state, isLoading: false, data })),
    on(MyFeatureActions.loadMyFeatureFailed, state => ({ ...state, isLoading: false, hasError: true })),
);

// The wrapper function is required: AOT cannot resolve `createReducer`'s
// return value directly in a `StoreModule.forFeature()` call.
export const reducer = (state: State | undefined, action: Action) => myFeatureReducer(state, action);

// my-feature.selectors.ts
import { createFeatureSelector, createSelector } from '@ngrx/store';
import * as fromMyFeature from './my-feature.reducer';

const selectMyFeatureState = createFeatureSelector<fromMyFeature.State>(fromMyFeature.myFeatureFeatureKey);

const selectMyFeatureData = createSelector(selectMyFeatureState, state => state.data);
const selectMyFeatureLoading = createSelector(selectMyFeatureState, state => state.isLoading);
const selectMyFeatureError = createSelector(selectMyFeatureState, state => state.hasError);

export { selectMyFeatureState, selectMyFeatureData, selectMyFeatureLoading, selectMyFeatureError };

// my-feature.effects.ts
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { catchError, map, switchMap } from 'rxjs/operators';
import { of } from 'rxjs';
import { MyFeatureApiService } from '@payability/pyb-ng2-api';
import * as MyFeatureActions from './my-feature.actions';

@Injectable()
export class MyFeatureEffects {
    load$ = createEffect(() =>
        this.actions$.pipe(
            ofType(MyFeatureActions.loadMyFeature),
            switchMap(() =>
                this.api.get().pipe(
                    map(data => MyFeatureActions.loadMyFeatureSuccess({ data })),
                    catchError(() => of(MyFeatureActions.loadMyFeatureFailed())),
                ),
            ),
        ),
    );

    constructor(private readonly actions$: Actions, private readonly api: MyFeatureApiService) {}
}

// my-feature.module.ts
import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { StoreModule } from '@ngrx/store';
import { MyFeatureEffects } from './my-feature.effects';
import * as fromMyFeatureReducer from './my-feature.reducer';

@NgModule({
    imports: [
        EffectsModule.forFeature([MyFeatureEffects]),
        StoreModule.forFeature(fromMyFeatureReducer.myFeatureFeatureKey, fromMyFeatureReducer.reducer),
    ],
})
export class MyFeatureFeatureModule {}