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
- Configuring Epics in Store
- Redux Http Module
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