Loadable-State

This package is to help you model http request state. It's an add-on to redux/ngrx

Why use this package?

Reduce boilerplate and better code.

I wrote details in this 5-min blog: https://blog.angularindepth.com/handle-api-call-state-nicely-445ab37cc9f8

Install

npm install loadable-state

Get Started

Let's assume we need to send an http request to get a list of today's news. And we are using Angular/ngrx.

####Step1: Model your state

1export interface News extends Loadable {
2    news: string[];
3}

In this way, News model has 4 fields: news, loading, success and error.

####Step2: Create your actions

1export enum NewsActionsTypes {
2  Load = '[NEWS PAGE] LOAD NEWS',
3  LoadSuccess = '[NEWS PAGE] LOAD NEWS SUCCESS',
4  LoadError = '[NEWS PAGE] LOAD NEWS ERROR',
5}
6
7export class LoadNews implements Action {
8  readonly type = NewsActionsTypes.Load;
9}
10
11export class LoadNewsSuccess implements Action {
12  readonly type = NewsActionsTypes.LoadSuccess;
13  constructor(public payload: {entities: string[]}) {}
14}
15
16export class LoadNewsError implements Action {
17  readonly type = NewsActionsTypes.LoadError;
18  // Notes that `error` has to be like this, cannot be wrapped inside a payload
19  constructor(public error: any) {}
20}
21export type NewsActions = LoadNews | LoadNewsSuccess | LoadNewsError

####Step3 Reducer (Most Important)

1// base reducer should only update non-loadable states
2function baseNewsReducer(state: News = createDefaultNews(), action: NewsActions): News {
3  switch (action.type) {
4    case NewsActionsTypes.LoadSuccess:
5      return {
6        ...state,
7        entities: action.payload.entities
8      };
9    default:
10      return state;
11  }
12}
13// withLoadable enhances baseReducer to update loadable state
14export function newsReducer(state: News, action: Action): News {
15  return withLoadable(baseNewsReducer, {
16    loadingActionType: NewsActionsTypes.Load,
17    successActionType: NewsActionsTypes.LoadSuccess,
18    errorActionType: NewsActionsTypes.LoadError,
19  })(state, action);
20}

baseNewsReducer handles non-loadable states (i.e. entities)

newsReducer will actually apply withLoadable enhancer to baseReducer to give some “magic” to baseReducer , and the “magic” is to handle the 3 loadable states changes automatically.

####Step4 Effects

1@Effect()
2loadNews = this.actions$.pipe(
3 ofType(NewsActionsTypes.Load),
4 switchMap(action => this.http.get('some url')),
5 map((response: any) => new LoadNewsSuccess({entities: response.todaysNews})),
6 catchError(error => of(new LoadNewsError(error)))
7);

Checkout this StackBlitz for a complete example. https://stackblitz.com/github/zhaosiyang/loadable-example