angular-redux-util

Angular Redux Util is a helper library for using Angular 6+ applications with Redux (meant for use with @angular-redux) and Redux Observable. It contains a simplified Epic setup and built in generic Get and Post epics.

Table of Contents

• Known Issues
• Requirements
• Defining Redux Observable Epics
  • Before
  • After
• Configuring Epics in Store
  • Before
  • After
• Redux Http Module
  • Getting Started
  • Get Action
  • Post Action
  • Example

Peer Dependencies

|Module|Version| |---|---| |@angular/common|^6.0.0| |@angular/core|^6.0.0| |redux|^4.0.0| |redux-observable|^1.0.0| |redux-observable-util|^0.1.0| |rxjs|^6.0.0|

Meant for use with @angular-redux ^9.0.0.

Defining Redux Observable Epics

Angular Redux Util simplifies the setup for defining an epic, cleaning up the code for readability.

Before

somethingEpic = (action$, state$) =>
  action$.pipe(
    ofType(SOMETHING),
    switchMap(() =>
      this.httpClient.get<any>('/something').toPromise()
        .then(response => of({ type: SUCCESS, response }))
        .catch(error => of({ type: ERROR, response }));
    )
  );

After

@Epic(SOMETHING)
somethingEpic(action: AnyAction, state$) {
  this.httpClient.get<any>('/something').toPromise()
    .then(response => { type: SUCCESS, response })
    .catch(error => { type: ERROR, response });
}

Configuring Epics in Store

Configuration of the epics is also simplified compared to the standard setup of Redux Observable. You call the generateEpics instead of combineEpics, and pass the services that contain @Epic decorators.

Before

const epicMiddleware = createEpicMiddleware();
this.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);
epicMiddleware.run(combineEpics(service.epic1, service.epic2));

After

const epicMiddleware = createEpicMiddleware();
this.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);
epicMiddleware.run(generateEpics(service));

Redux Http Module

The Redux Http Module provide Get and Post epics ready out of the box. They take a specific payload, handle all of the http interactions, and return the results. You must provide a URL, success action (and body for POST). The error action and headers are optional. If no error action is provided, it will automatically use GENERIC_ERROR.

Getting Started

To get started, we need to setup the Get and Post epics into the store:

const epicMiddleware = createEpicMiddleware();

// Configure @angular-redux
this.ngRedux.configureStore(
  rootReducer,
  APP_INITIAL_STATE,
  [
    ...middleware,
    epicMiddleware
  ],
  [ ...enhancers, devTool.isEnabled() ? devTool.enhancer() : f => f]);

epicMiddleware.run(
  generateEpics(reduxHttpService)
);

Actions

Base Http Action

export class ReduxHttpAction {
  url: string;
  successAction: string;
  errorAction?: string;
  payload?: any;

  options?: ReduxHttpOptions;
}

Options

export class ReduxHttpOptions {
  headers?: HttpHeaders | {[header: string]: string | string[]};
  reportProgress?: boolean;
  responseType?: 'json';
  withCredentials?: boolean;
}

Http Action With Body

export class ReduxHttpBodyAction extends ReduxHttpAction {
  body: any|null;
}

Get Action

• Type: REDUX_GET
• Action Format: ReduxHttpAction

Example

getData(): void {
  const action: ReduxGetAction = {
    type: REDUX_GET
    url: 'assets/data.json',
    successAction: ExampleReduxActions.GET_DATA_SUCCESS
  };

  this.ngRedux.dispatch(action);
}

Post Action

• Type: REDUX_POST
• Action Format: ReduxHttpBodyAction

Patch Action

• Type: REDUX_PATCH
• Action Format: ReduxHttpBodyAction

Put Action

• Type: REDUX_PUT
• Action Format: ReduxHttpBodyAction

Delete Action

• Type: REDUX_DELETE
• Action Format: ReduxHttpAction