Angular Integration

mini-rx-store-ng is a package for better Angular Integration.

npm version

With mini-rx-store-ng we can use MiniRx Store the Angular way:

Usage#

Requirements#

  • Angular >= 9

Installation#

npm i mini-rx-store-ng

Configure the Store in the App Module#

app.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from 'mini-rx-store-ng';
@NgModule({
imports: [
StoreModule.forRoot({
extensions: [
// Add extensions here
// new LoggerExtension()
],
reducers: {
// Add feature reducers here
// todo: todoReducer
},
metaReducers: [
// Add meta reducers here
]
}),
]
})
export class AppModule {
}

Register Feature Reducers in Angular Feature Modules#

todo.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from 'mini-rx-store-ng';
import todoReducer from './todo-reducer';
@NgModule({
imports: [
StoreModule.forFeature('todo', todoReducer),
]
})
export class TodoModule {
constructor() {
}
}

Register Effects#

Create an Angular service which holds all effects which belong to a Feature (e.g. "todo").

todo-effects.service.ts
import { Injectable } from '@angular/core';
import { Actions, ofType } from 'mini-rx-store';
import { ajax } from 'rxjs/ajax';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { of } from 'rxjs';
import { LoadTodosFail, LoadTodosSuccess, TodoActionTypes } from './todo-actions';
@Injectable({providedIn: 'root'})
export class TodoEffects {
loadTodos$ = this.actions$.pipe(
ofType(TodoActionTypes.LoadTodos),
mergeMap(() =>
ajax('https://jsonplaceholder.typicode.com/todos').pipe(
map(res => new LoadTodosSuccess(res.response)),
catchError(err => of(new LoadTodosFail(err)))
)
)
);
constructor(
private actions$: Actions
) {
}
}

Register the effects

todo.module.ts
import { NgModule } from '@angular/core';
import { EffectsModule, StoreModule } from 'mini-rx-store-ng';
import { TodoEffects } from './todo-effects.service';
import { todoReducer } from './todo-reducer';
@NgModule({
imports: [
StoreModule.forFeature('todo', todoReducer),
EffectsModule.register([TodoEffects]),
]
})
export class TodoModule {
}

The register method from the EffectsModule accepts an array of classes with effects and can be used in both, root and feature modules.

Get hold of the store and actions via the Angular Dependency Injection#

After we registered the StoreModule in the AppModule we can use Angular DI to access Store and Actions.

For example in a component:

import { Component } from '@angular/core';
import { Store } from 'mini-rx-store';
import { Observable } from 'rxjs';
@Component({
selector: 'my-component',
template: ''
})
export class MyComponent {
// Select state from the Store
someState$: Observable<any> = this.store.select(state => state);
constructor(
private store: Store,
) {
}
doSomething() {
this.store.dispatch({type: 'some action'})
}
}

Redux Dev Tools#

StoreDevtoolsModule is a thin wrapper for the ReduxDevtoolsExtension from 'mini-rx-store'. It is needed to trigger Angular Change Detection when using time travel in the Redux Dev Tools Browser PlugIn.

import { StoreDevtoolsModule } from 'mini-rx-store-ng';
@NgModule({
imports: [
// ...
StoreDevtoolsModule.instrument({
name: 'MiniRx Store',
maxAge: 25,
latency: 250,
}),
]
})
export class AppModule {
}