Nutritious Pomegranate Muffins
    Wondering what’s next for npm?Check out our public roadmap! »

    angular-redux-util
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.4 • Public • Published

    angular-redux-util

    npm npm CircleCI

    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

    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(actionAnyAction, state$) {
      this.httpClient.get<any>('/something').toPromise()
        .then(response => { typeSUCCESS, response })
        .catch(error => { typeERROR, 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

    Keywords

    Install

    npm i angular-redux-util

    DownloadsWeekly Downloads

    2

    Version

    3.0.4

    License

    MIT

    Unpacked Size

    239 kB

    Total Files

    59

    Last publish

    Collaborators

    • avatar