Ngrx-normalizr-crud NPM

WIP: ngrx-normalizr-crud

Actions, effects, reducers, selectors and guards for ngrx-normalizr.

This package provides a set of Actions, effects, reducers, selectors and guards for using ngrx-normalizr entity states.

Installation

To install this package:

yarn add ngrx-normalizr-crud
npm i ngrx-normalizr-crud

Peer dependencies

ngrx-normalizr-crud uses @ngrx/store and ngrx-normalizer as peer dependencies, so you need to install them if not present already:

yarn add @ngrx/store ngrx-normalizer
npm i @ngrx/store ngrx-normalizer

Usage

Also refer to the Typedoc documentation.

reducer.ts

import { createReducer, NormalizedEntityState, initialEntityState } from 'ngrx-normalizr-crud';

const entityReducer = createReducer(userSchema);

export function reducer(
	state: NormalizedEntityState = initialEntityState,
	action: any
) {
  // do any reducer logic for your state or in this case
  // simply return the result of the entity reducer
	return entityReducer(state, action);
}

selectors

import { createSelectors } from 'ngrx-normalizr-crud';
import { User, userSchema } from '../classes/user';

// create an entity state selector
const featureSelector = createFeatureSelector<State>('users');
const getUserEntityState = createSelector(
  featureSelector,
  (state: State) => state.userEntity
);

export const entitySelectors = {
  // pass the entity state selector
  ...createSelectors<User>(userSchema, getUserEntityState)
};

actions.ts

import { createActions } from 'ngrx-normalizr-crud';
import { User, userSchema } from '../classes/user';

export const actions = createActions<User>(userSchema);

effects.ts

import { EntityCrudEffect } from 'ngrx-normalizr-crud';
import { User, userSchema } from '../classes/user';

@Injectable()
export class UserCrudEffects extends EntityCrudEffect<User> {

  constructor(private actions$: Actions, private http: HttpClient) {
    super(actions$, userSchema);
  }

  // use createSearchEffect, createUpdateEffect ...
  @Effect()
	searchEffect$ = this.createSearchEffect(
    action => this.http.get('/users')
	);

  // ...
}

State properties

loading: boolean;
selectedId: string;
query: any;
error: any;

Selectors

getSelectedId: MemoizedSelector<object, NormalizedEntityState['selectedId']>;
getLoading: MemoizedSelector<object, NormalizedEntityState['loading']>;
getIds: MemoizedSelector<object, NormalizedEntityState['selectedId'][]>;
getQuery: MemoizedSelector<object, NormalizedEntityState['query']>;
getError: MemoizedSelector<object, NormalizedEntityState['error']>;
getEntities: MemoizedSelector<{}, T[]>;
getSelectedEntity: MemoizedSelector<any, T>;