How to use @ngxs/store - 10 common examples

if (aDate < bDate) return -1;
    if (aDate > bDate) return 1;
    return 0;
  } else {
    // Always prioritize scheduled if mixed scenario
    if (a.meta.schedule && !b.meta.schedule) return 1;
    else return -1;
  }
}

class SaveState {
  static readonly type: string = '[PostyBirb] Save State';
  constructor(public state: PostyBirbSubmissionStateModel) { }
}

@State({
  name: 'postybirb',
  defaults: {
    editing: [],
    submissions: [],
  }
})
export class PostyBirbState implements NgxsOnInit {

  private saveSubject: Subject;

  constructor(private translate: TranslateService, private snotify: SnotifyService, private viewSubmissionManager: ViewSubmissionsManagerService) {
    this.saveSubject = new Subject();
    this.saveSubject.pipe(debounceTime(200)).subscribe((state) => {
      if (isDevMode()) console.log('Saving State', state);
      db.set('PostyBirbState', state || {
        editing: [],

private handleActions(): void {
    // listen for open prefs
    this.subToShowPagePrefs = this.actions$.pipe(ofAction(ShowPagePrefs))
      .subscribe(() => this.openView.emit());
    // clean up on a reset
    this.subToReset = this.actions$.pipe(ofAction(Reset))
      .subscribe(() => this.store.dispatch(new ClearPaths()));
    // cancel long-running operation
    this.subToCancel = this.actions$.pipe(ofAction(Canceled))
      .subscribe(() => {
        this.zone.run(() => {
          this.store.dispatch(new Progress({ state: 'completed' }));
          this.s3Svc.cancelUpload();
        });
      });
  }

private handleActions(): void {
    // listen for open prefs
    this.subToShowPagePrefs = this.actions$.pipe(ofAction(ShowPagePrefs))
      .subscribe(() => this.openView.emit());
    // clean up on a reset
    this.subToReset = this.actions$.pipe(ofAction(Reset))
      .subscribe(() => this.store.dispatch(new ClearPaths()));
    // cancel long-running operation
    this.subToCancel = this.actions$.pipe(ofAction(Canceled))
      .subscribe(() => {
        this.zone.run(() => {
          this.store.dispatch(new Progress({ state: 'completed' }));
          this.s3Svc.cancelUpload();
        });
      });
  }

private handleActions(): void {
    // listen for open prefs
    this.subToShowPagePrefs = this.actions$.pipe(ofAction(ShowPagePrefs))
      .subscribe(() => this.openView.emit());
    // clean up on a reset
    this.subToReset = this.actions$.pipe(ofAction(Reset))
      .subscribe(() => this.store.dispatch(new ClearPaths()));
    // cancel long-running operation
    this.subToCancel = this.actions$.pipe(ofAction(Canceled))
      .subscribe(() => {
        this.zone.run(() => {
          this.store.dispatch(new Progress({ state: 'completed' }));
          this.s3Svc.cancelUpload();
        });
      });
  }

private handleActions(): void {
    // listen for open prefs
    this.subToShowPagePrefs = this.actions$.pipe(ofAction(ShowPagePrefs))
      .subscribe(() => this.openView.emit());
  }

private sendToDevTools(state: any, action: any, newState: any) {
    const type = getActionTypeFromInstance(action);
    // if init action, send initial state to dev tools
    const isInitAction = type === '@@INIT';
    if (isInitAction) {
      this.devtoolsExtension!.init(state);
    } else {
      this.devtoolsExtension!.send({ ...action, type }, newState);
    }
  }

ngOnInit(): void {
        
        this.sup.add(this.actions$.pipe(
            ofActionCompleted(GotHubChatProblem)
        ).subscribe(() => {
            // Display error about chat server's problem
        }))
        this.sup.add(
            this.actions$.pipe(
                ofActionSuccessful(ActiveDoubleChatRoom),
            ).subscribe(
                () => {
                    if(!this.isShowChatBox)
                        this.isShowChatBox = true
                }
            )
        )
        this.sup.add(this.chatState$.pipe(
            filter(state => ObjectUtils.isNotNull(state.currentUser)),
            tap(

if (child.slug !== slug) {
                      return child;
                    }

                    return { ...child, value: response.value };
                  });
                })};
              })
            };
          })});
        }
      })
    );
  }

  @Action(RenameSiteSettingsSitenameAction)
  renameSiteSettingsSitename({ setState, getState }: StateContext, action: RenameSiteSettingsSitenameAction) {
    const state = getState();
    const newState = {};

    /* Using the loop to retain the element order in the map */
    for (const siteName in state) {
      if (siteName === action.site.name) {
        newState[action.siteName] = state[siteName];
      } else {
        newState[siteName] = state[siteName];
      }
    }

    setState(newState);
  }

changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'elaws-select-bucket',
  templateUrl: 'select-bucket.html',
  styleUrls: ['select-bucket.scss']
})

export class SelectBucketComponent implements ControlValueAccessor,
                                              MatFormFieldControl,
                                              OnDestroy {

  static nextID = 0;

  @HostBinding('attr.aria-describedby') describedBy = '';
  @HostBinding() id = `elaws-select-bucket-${SelectBucketComponent.nextID++}`;

  @Select(S3State.getBuckets) buckets$: Observable;

  // @see MatFormFieldControl
  controlType = 'elaws-select-bucket';
  focused = false;
  shouldLabelFloat = false;
  stateChanges = new Subject();

  selectBucketForm: FormGroup;

  // disabled accessor / mutator

  @Input() get disabled(): boolean {
    return this._disabled;
  }

  set disabled(disabled: boolean) {

name: 'filter',
  defaults: {
    location: { latitude: 39.833333, longitude: -98.583333 }, // default location is 'Geographic center of the contiguous United States'
    distance: 50,
    rating: 4,
    reviews: 100
  },
  children: [AutocompleteState]
})
export class FilterState {
  @Selector()
  public static filter(state: FilterStateModel): FilterStateModel {
    return state;
  }

  @Selector()
  public static location(state: FilterStateModel): Location {
    return state.location;
  }

  @Selector()
  public static distance(state: FilterStateModel): number {
    return state.distance;
  }

  @Action(SetLocation)
  setLocation({ getState, setState }: StateContext, { payload }: SetLocation) {
    setState({ ...getState(), location: payload });
  }

  @Action(SetDistance)
  setDistance({ getState, setState }: StateContext, { payload }: SetDistance) {