ngrx-helpers
A library to simplify ngrx implementation in Angular Apps.
Getting started
For complete reference, look at the Git Repo.
App Module configuration
import NgrxHelperModule.forRoot()
in app.module along with other ngrx modules.
Effects
The helper class NgrxEffect
simplifies the effect configuration.
It lets you configure effects with minimal inputs such as action, endpint and http method.
Every effect emits three actions (*_RESOLVING, *_RESOLVED, *_ERROR) as follows.
- GET_USER_RESOLVING: emitted immediately when the action GET_USER dispatched which helps setting corresponding loaders.
- GET_USER_RESOLVED: emitted when the api gets successfully resolved.
- GET_USER_ERROR: emitted when api fails with 4XX or 5XX status codes.
Note: endpint can be configured with params which can be sent at the time of dispatching action.
Reducer
;
Dispatch action
this.store.dispatch;
Subscribe a state
Subscriptions are simplified by extending the component from the helper class NgrxStoreSubscription
.
Managing Template
Every reducer gets resolved with data with the following format.
This format helps us set the appropriate view in the component template.
Loading... Error fetching user info {{userInfo.data | json}}
with the help of directives, component automatically responds based on the state from the store.
Summary
When the action GET_USER gets dispatched
- it emits GET_USER_RESOLVING
- which will set the
state
in store to 'RESOLVING' - the component will render *ngrxViewResolving. (a loader screen)
- which will set the
- if api call fails, it emits GET_USER_ERROR
- which will set the
state
in store to 'RESOLVED' - the component will render *ngrxViewError. (error screen)
- which will set the
- if api call fails, it emits GET_USER_RESOLVED
- which will set the
state
in store to 'RESOLVED' - the component will render *ngrxViewResolved. (appropriate UI for user data)
- which will set the