@tomtomb/ngrx-toolkit NPM

NgRx Toolkit

A bundle containing NgRx Helper classes and functions to simplify the coding experience

Installation

Requires Angular 12.1+ with Ivy enabled and TypeScript 4.3+

npm install @ngrx/{store,effects,entity} @tomtomb/ngrx-toolkit
# or
yarn add @ngrx/{store,effects,entity} @tomtomb/ngrx-toolkit

You probably want to install the store devtools as well

npm install -D @ngrx/store-devtools
# or
yarn add -D @ngrx/store-devtools

Getting started

For a full example have a look at the sandbox application. The toolkit can easily be integrated into an existing NgRx store.

API

These docs are based on version prior to 2.x. The new version included many breaking changes, so please refer to the sandbox app for now!

`createActionGroup<Arguments, ResponseData, ErrorResponse>({method, name, scope, isUnique})`

Creates an action group containing a call, success and failure action.

Generics

Generic	Extends	Description	Default
Arguments	`ArgumentsBase / null`	Arguments needed to perform the action
ResponseData		The response if the call was successfully performed
ErrorResponse		Additional error data returned by the HttpErrorResponse error property	`unknown`

IMPORTANT: The structure of the Arguments type must be based on the ArgumentsBase type.

export interface ArgumentsBase {
  queryParams?: Record<string | number, unknown>;
  params?: Record<string | number, unknown>;
  body?: unknown;
  sideUpdates?: Record<string, ArgumentsBase>;
}

Arguments

Argument	Type	Description	Default
method	`'GET' / 'POST' / 'PUT' / 'PATCH' / 'DELETE'`	HTTP verb of the action
name	`string`	The actions name
scope	`string`	The actions scope
isUnique	`boolean / undefined`	By default all action calls will be stored inside the store. If `true`, only one action call will be stored. This is useful for things like login actions	`false`

Returns

TypedActionObject<Arguments, ResponseData, ErrorResponse>

Example

export const getFoo = createActionGroup<
  { queryParams: { id: string } }, // This object must follow the ArgumentsBase type
  { value: boolean },
  { additionalErrorData: string }
>({
  method: 'GET',
  name: 'Foo',
  scope: 'Sandbox',
});

View the sandbox code

`createStoreSlice({actions})`

Creates an reducer based on provided TypedActionObjects.

WIP

View the sandbox code

`createEntitySelectors({getState, storeSlice})`

Creates selector functions to be used by FacadeBase

WIP

View the sandbox code

`EffectBase` (class)

A abstract class for handling ngrx effects with ActionGroups

`constructor(actions, featureService)`

Arguments

Argument	Type	Description	Default
actions	`Actions`	The NgRx Actions Observable
featureService	`class`	The class where the actual http calls are located

`onActionSwitchMap(action, serviceCall, sideUpdates)`

`onActionMergeMap(action, serviceCall, sideUpdates)`

`onActionExhaustMap(action, serviceCall, sideUpdates)`

`onActionConcatMap(action, serviceCall, sideUpdates)`

These methods are all doing the same except for the used observable flattening operator.

RxJS Docs: switchMap, mergeMap, exhaustMap, concatMap

Generics

Generics should NOT be provided by the user. They are filled automatically.

Arguments

Argument	Type	Description	Default
action	`TypedActionObject`	The action group created via `createActionGroup()`
serviceCall	`method`	A reference to the actual http call
sideUpdates	`object / undefined`	Additional user defined side effects. These actions will be called after the parent success action gets called	undefined

Example

@Injectable()
export class SandboxEffects extends EffectBase {
  getFoo$ = this.onActionSwitchMap({
    action: SandboxActions.getFoo,
    serviceCall: this.featureService.getFoo,
  });

  constructor(
    private actions$: Actions,
    private featureService: SandboxService
  ) {
    super(actions$, featureService);
  }
}

View the sandbox code