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.
- Known Issues
- Requirements
- Defining Redux Observable Epics
- Configuring Epics in Store
- Redux Http Module
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.
Angular Redux Util simplifies the setup for defining an epic, cleaning up the code for readability.
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 }));
)
);
@Epic(SOMETHING)
somethingEpic(action: AnyAction, state$) {
this.httpClient.get<any>('/something').toPromise()
.then(response => { type: SUCCESS, response })
.catch(error => { type: ERROR, response });
}
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.
const epicMiddleware = createEpicMiddleware();
this.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);
epicMiddleware.run(combineEpics(service.epic1, service.epic2));
const epicMiddleware = createEpicMiddleware();
this.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);
epicMiddleware.run(generateEpics(service));
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
.
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)
);
export class ReduxHttpAction {
url: string;
successAction: string;
errorAction?: string;
payload?: any;
options?: ReduxHttpOptions;
}
export class ReduxHttpOptions {
headers?: HttpHeaders | {[header: string]: string | string[]};
reportProgress?: boolean;
responseType?: 'json';
withCredentials?: boolean;
}
export class ReduxHttpBodyAction extends ReduxHttpAction {
body: any|null;
}
-
Type:
REDUX_GET
-
Action Format:
ReduxHttpAction
getData(): void {
const action: ReduxGetAction = {
type: REDUX_GET
url: 'assets/data.json',
successAction: ExampleReduxActions.GET_DATA_SUCCESS
};
this.ngRedux.dispatch(action);
}
-
Type:
REDUX_POST
-
Action Format:
ReduxHttpBodyAction
-
Type:
REDUX_PATCH
-
Action Format:
ReduxHttpBodyAction
-
Type:
REDUX_PUT
-
Action Format:
ReduxHttpBodyAction
-
Type:
REDUX_DELETE
-
Action Format:
ReduxHttpAction