Simplified Redux in Angular

[https://github.com/tagpi/angular-redux-services]

Setup

• Install the library

npm install --save angular-redux-service

• Import ReduxModule in app.module
• Initialize the ReduxService

import { ReduxModule, ReduxService } from 'angular-redux-service';
@NgModule({
  imports: [ ReduxModule ]
})
export class AppModule { 
  constructor(reduxService: ReduxService) {
    reduxService.init({}, [], environment.production);
  }
}

rxState Pipe

The rxState pipe is an async pipe that will return the state represented by the redux path. Unsubscribing is also handled by the pipe.

<div *ngIf="'@search-example' | rxState as search">
  <span>query: {{ search?.query }}</span>
  <span>result: {{ search?.result }}</span>
</div>

Redux Map Service Configuration

The Redux Map Service is an Angular service that is used to configure the reducer and epics.

// state slice interface
export interface State {
  query: string;
  result: any[];
}

@Injectable({ providedIn: 'root' })
export class SearchExampleService {

  // state slice path
  static path = '@search-example';

  // default value
  static initial: State = {
    query: '',
    result: []
  };

  // create the action '@search-example.query'
  // * this will be replaced with a dispatch action upon initialization
  // * the state and payload have been cloned for immutability
  @rxAction() query(criteria: string) {
    return (state: State, payload: typeof criteria) => {
      state.query = payload;
    };
  }

  // create an epic or effect
  // * triggered from 'query'
  // * will call the 'queryHandler' 
  @rxEpic('query', 'queryHandler') private queryRequest(criteria: string) {
    return of([ { name: 'result #1' }]);
  }

  // create the action '@search-example.queryHandler'
  @rxAction() private queryHandler(results: any[]) {
    return (state: State, payload: typeof results) => {
      state.result = payload;
    };
  }

}

• Register the service instance to redux

@NgModule()
export class SearchExampleModule {
  constructor(reduxService: ReduxService, searchExampleService: SearchExampleService){
    reduxService.register(exampleService);
  }
}

Documentation

• Service - service setup

• Action - action creation and configuration

• Epic / Effect - epic creation and configuration

Added Features

• Multiple Service Files - breakdown large services into multiple services

• State Reset - built in application wide reset

• Resolver - creating resolvers based on state