How to use @ngrx/store - 10 common examples

return packet;
    }
}

function processPacket(aprsSituation: State, packet) {
  packet=ensurePacketReceivedAtIsDate(packet);
  aprsSituation.rawPackets.push(packet);
  aprsSituation.lastServerTime=Math.max(aprsSituation.lastServerTime,
    packet.receivedAt.getTime());

  // I suspect that the deduplications and summaries might be best
  // done as selectors.
  //calculateSummaries(state);
}

const aprsSituationReducer = createReducer(
  initialState,

  on(AprsSituationActions.receivedPacket,
    function(aprsSituation, { packet }):State {
      console.log('receivedPacket');
      let start=Date.now();
      // Since state is immutable, we need to copy the list of packets.
      let newSituation:State = {
        ...aprsSituation,
        rawPackets: [],
        deduplicatedPackets: [],
        lastServerTime: 0
      };
      aprsSituation.rawPackets.map(packet => {
        processPacket(newSituation, packet);
      });

import { bootstrap } from '@angular/platform-browser-dynamic';
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
import { APP_BASE_HREF } from '@angular/common';
import * as App from './app/shared/index';
import { AppComponent } from './app/components/index';
import { AuthConfig, AuthHttp } from 'angular2-jwt/angular2-jwt';
import { provideStore } from '@ngrx/store';
import { MODAL_BROWSER_PROVIDERS } from 'angular2-modal/platform-browser/index';

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  MODAL_BROWSER_PROVIDERS,
  provideStore(App.APP_STORE),
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' }),
  provide(AuthHttp, {
    useFactory: (http: Http) => {
      return new AuthHttp(new AuthConfig({
        noJwtError: true,
        tokenName: 'jwt'
      }), http);
    },
    deps: [Http]
  }),
  App.APP_PROVIDERS
]).catch(err => console.error(err));

// In order to start the Service Worker located at "./worker.js"
// uncomment this line. More about Service Workers here
// https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers

bar: {
        a: {
          b: {
            c: {
              d: 'world'
            }
          }
        }
      }
    }
  };

  const msFeature = createFeatureSelector('myFeature');
  const msBar = createSelector(msFeature, state => state.bar);

  const store = new Store(of(globalState), undefined as any, undefined as any);

  it('selects sub state with Select decorator', () => {
    NgrxSelect.store = store;
    class MyStateSelector {
      @Select(msBar) bar$: Observable; // using MemoizedSelector
    }

    const mss = new MyStateSelector();

    mss.bar$.subscribe(n => {
      expect(n).toBe(globalState.myFeature.bar);
    });
  });

  it('should apply pipeable operator when provided', () => {
    NgrxSelect.store = store;

/**
 *  Because the data structure is defined within the reducer it is optimal to
 *  locate our selector functions at this level. If store is to be thought of
 *  as a database, and reducers the tables, selectors can be considered the
 *  queries into said database. Remember to keep selectors small and
 *  focused so they can be combined and composed to fit each particular
 *  use-case.
 */

@Injectable()
export class NotesSelectors {
  getEntities = (state: Notes) => state.entities;
  getSortBy = (state: Notes) => state.sortBy;
  // tslint:disable-next-line: member-ordering
  getAllArray = createSelector(this.getEntities, this.getSortBy, (entities, sortBy) => {
    return values(entities).sort((n1, n2) => {
      switch (sortBy) {
        case '+date': {
          return n1.id > n2.id ? 1 : -1;
        }
        case '-date': {
          return n1.id < n2.id ? 1 : -1;
        }
        case '+title': {
          return n1.title.toLowerCase() >= n2.title.toLowerCase() ? 1 : -1;
        }
        case '-title': {
          return n1.title.toLowerCase() < n2.title.toLowerCase() ? 1 : -1;
        }
      }
    });

ProfileCardComponent,
    UserStatsCardComponent,
    GameCardComponent,
    GameInviteComponent,
    RecentGamesComponent,
    ProfileSettingsComponent,
    MyQuestionsComponent,
    QuestionAddUpdateComponent
  ],
  imports: [
    // rwa modules
    SharedModule,
    UserRoutingModule,

    //ngrx feature store
    StoreModule.forFeature('user', reducer),

    //ngrx effects
    EffectsModule.forFeature(effects),

  ],
  providers: [],
  exports: [
    ProfileCardComponent,
    UserStatsCardComponent,
    GameCardComponent,
    GameInviteComponent,
    RecentGamesComponent,
    ProfileSettingsComponent,
    MyQuestionsComponent,
    QuestionAddUpdateComponent
  ]

/* Copyright (c) 2018, RTE (http://www.rte-france.com)
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/.
 */

import {createFeatureSelector, createSelector} from '@ngrx/store';
import * as fromCardOperations from './card-operation.reducer';
import {State as CardOperationsState} from './card-operation.reducer';

export const getCardOperationsState =
  createFeatureSelector( 'cardOperation');

export const {
  selectIds: getCardOperationIds,
  selectAll: getAllCardOperations,
  selectEntities: getCardOperationEntities
} = fromCardOperations.adapter.getSelectors(getCardOperationsState);


export const getSelectedCardOperationId = createSelector(
  getCardOperationsState,
  fromCardOperations.getSelectedId
);

export const getSelectedCardOperation = createSelector(
  getSelectedCardOperationId,
  getCardOperationEntities,

import { Injectable } from '@angular/core';
import { Store, createFeatureSelector, createSelector } from '@ngrx/store';

import { App } from '../../core';
import { AppState } from './reducer';
import { distinctUntilChanged, tap } from 'rxjs/operators';

import { initialState } from './reducer';

const getAppState = createFeatureSelector('appConfig');

// The following selector implementation guards against empty session state
// as happens when replay with redux dev tools
const getDataSource = createSelector(getAppState, (state: AppState) => (state ? state.session.dataSource : initialState.dataSource));

@Injectable()
export class AppSelectors {
  constructor(private store: Store) {}

  get dataSource$() {
    return this.store.select(getDataSource).pipe(distinctUntilChanged());
  }
}

view:   fromViewUser.ViewUserState;
  delete: fromDeleteUser.DeleteUserState
}

export const reducers: ActionReducerMap = {
  load:   fromLoadUsers.reducer,
  create: fromCreateUser.reducer,
  update: fromUpdateUser.reducer,
  view:   fromViewUser.reducer,
  delete: fromDeleteUser.reducer
}

export const combinedReducers = combineReducers(reducers);

// Main Access User State
export const getAccessUserState = createFeatureSelector('accessUser');

// Load User States
export const getLoadUsersState    = createSelector(getAccessUserState, (state: AccessUserState) => state.load);
export const getLoadUsersLoading  = createSelector(getLoadUsersState, fromLoadUsers.getLoadUsersLoading);
export const getLoadUsersLoaded   = createSelector(getLoadUsersState, fromLoadUsers.getLoadUsersLoaded);
export const getLoadUsersFailed   = createSelector(getLoadUsersState, fromLoadUsers.getLoadUsersFailed);
export const getLoadUsersError    = createSelector(getLoadUsersState, fromLoadUsers.getLoadUsersError);
export const getLoadUsersData     = createSelector(getLoadUsersState, fromLoadUsers.getLoadUsersData);

// Create User States
export const getCreateUserState   = createSelector(getAccessUserState, (state: AccessUserState) => state.create);
export const getCreateUserLoading = createSelector(getCreateUserState, fromCreateUser.getCreateUserLoading);
export const getCreateUserLoaded  = createSelector(getCreateUserState, fromCreateUser.getCreateUserLoaded);
export const getCreateUserFailed  = createSelector(getCreateUserState, fromCreateUser.getCreateUserFailed);
export const getCreateUserError   = createSelector(getCreateUserState, fromCreateUser.getCreateUserError);
export const getCreatedUser       = createSelector(getCreateUserState, fromCreateUser.getCreatedUser);

// additional entities state properties
  currentId: string | null;
  projectIdForLoadedRelatedData: string;
}

const sortByTitle = (p1: Project, p2: Project) => {
  return p1.title.localeCompare(p2.title);
};

export const projectAdapter: EntityAdapter = createEntityAdapter({
  // sortComparer: sortByTitle,
});

// SELECTORS
// ---------
export const selectProjectFeatureState = createFeatureSelector(PROJECT_FEATURE_NAME);
const {selectIds, selectEntities, selectAll, selectTotal} = projectAdapter.getSelectors();
export const selectCurrentProjectId = createSelector(selectProjectFeatureState, state => state.currentId);
export const selectProjectEntities = createSelector(selectProjectFeatureState, selectEntities);
export const selectAllProjects = createSelector(selectProjectFeatureState, selectAll);
export const selectUnarchivedProjects = createSelector(selectAllProjects, (projects) => projects.filter(p => !p.isArchived));
export const selectUnarchivedProjectsWithoutCurrent = createSelector(
  selectProjectFeatureState,
  (s) => {
    const ids = s.ids as string[];
    return ids.filter(id => id !== s.currentId).map(id => s.entities[id]).filter(p => !p.isArchived && p.id);
  },
);
export const selectArchivedProjects = createSelector(selectAllProjects, (projects) => projects.filter(p => p.isArchived));

export const selectIsRelatedDataLoadedForCurrentProject = createSelector(
  selectProjectFeatureState,

ids: string[];
}

const initialState: State = {
  loaded: false,
  loading: false,
  ids: [],
};

export const reducer = createReducer(
  initialState,
  on(CollectionPageActions.loadCollection, state => ({
    ...state,
    loading: true,
  })),
  on(CollectionApiActions.loadBooksSuccess, (state, { books }) => ({
    loaded: true,
    loading: false,
    ids: books.map(book => book.id),
  })),
  // Supports handing multiple types of actions
  on(
    CollectionApiActions.addBookSuccess,
    CollectionApiActions.removeBookFailure,
    (state, { book }) => {
      if (state.ids.indexOf(book.id) > -1) {
        return state;
      }
      return {
        ...state,
        ids: [...state.ids, book.id],
      };