LogoLogo
v3.4
v3.4
  • 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. Advanced

Composition

You can compose multiple stores together using class inheritance. This is quite simple:

@State({
  name: 'zoo',
  defaults: {
    type: null 
  }
})
class ZooState {
  @Action(Eat)
  eat(ctx: StateContext) {
    ctx.setState({ type: 'eat' });
  }
}

@State({
  name: 'stlzoo'
})
class StLouisZooState extends ZooState {
  @Action(Drink)
  drink(ctx: StateContext) {
    ctx.setState({ type: 'drink' });
  }
}

Now when StLouisZooState is invoked, it will share the actions of the ZooState. Also all state options are inherited.

PreviousAction HandlersNextError Handling

Last updated 6 years ago