LogoLogo
v3.5
v3.5
  • Introduction
  • Getting Started
    • Why
    • Installation
  • Concepts
    • Introduction
    • Store
    • Actions
    • State
    • Select
  • API
    • @Action
    • Actions(Stream)
    • Init Actions
    • Module
    • of-action
    • @Select
    • @Selector
    • @State
    • Store
  • Advanced
    • State Operators
    • Options
    • Lazy Loading
    • Sub States
    • Cancellation
    • Action Handlers
    • Composition
    • Error Handling
    • Life-cycle
    • Meta Reducers
    • Shared State
  • Recipes
    • Authentication
    • Caching
    • Unit Testing
    • Style Guide
  • Plugins
    • Introduction
    • CLI
    • Logger
    • Devtools
    • Storage
    • Forms
    • Web Socket
    • Router
    • HMR
  • NGXS Labs
    • Introduction
    • Emitter
    • Immer adapter
    • Dispatch decorator
  • Community
    • FAQ
    • Resources
    • Contributors
    • Contributing
    • Sponsors
  • Changelog
Powered by GitBook
On this page
  1. Recipes

Caching

Caching requests executed by Actions is a common practice. NGXS does not provide this ability out of the box, but it is easy to implement.

There are many different ways to approach this. Below is a simple example of using the store's current values and returning them instead of calling the HTTP service.

import { State, Action, StateContext } from '@ngxs/store';
import { of } from 'rxjs/observable/of';
import { tap } from 'rxjs/operators';

export class GetZebra {
  static readonly type = '[Zoo] GetZebra';
  constructor(public id: string) {}
}

@State<ZooStateModel>({
  defaults: {
    zebras: []
  }
})
export class ZooState {

  constructor(private animalService: AnimalService) {}

  @Action(GetZebra)
  getZebra(ctx: StateContext<ZooStateModel>, action: GetZebra) {
    const state = ctx.getState();
    // payload = id of animal
    const idx = state.zebras.findIndex(zebra => zebra.id === action.id);
    if (idx > -1) {
      // if we have the cache, just return it from the store
      return dispatch(new GetZebraSuccess(state.zebras[idx]));
    } else {
      return this.animalService.getZebra(action.id).pipe(
        map(resp => dispatch(new GetZebraSuccess(resp)))
      );
    }
  }

}
PreviousAuthenticationNextUnit Testing

Last updated 6 years ago