Как вызвать NgxsOnInit? - PullRequest
Новая
       8

Как вызвать NgxsOnInit?

0 голосов
/ 23 мая 2018

Я хочу вызвать действие, когда пользователь впервые заходит на мой сайт.Как лучше всего это сделать с помощью ngxs?Я обнаружил, что есть эта вещь, называемая NgxsOnInit, но я не знаю, как она срабатывает.

1 Ответ

0 голосов
/ 23 мая 2018

NgxsOnInit - это интерфейс, который вы реализуете в своем классе состояний.

хорошее применение для этого - диспетчерские действия при первой загрузке состояния. 

// auth.actions.ts
export class CheckSession() {
  static readonly type = 'auth/check-session';
}


// auth.state.ts
import { State, Action, NgxsOnInit } from '@ngxs/store';

export interface AuthStateModel {
  token: string;
}

@State<AuthStateModel>({
  name: 'auth',
  defaults: {
    token: null
  }
})
export class AuthState implements NgxsOnInit {

  ngxsOnInit(ctx: StateContext<AuthStateModel>) {
    ctx.dispatch(new CheckSession());
  }

  @Action(CheckSession)
  checkSession(ctx: StateContext<AuthStateModel>, action: CheckSession) {
    ...
  }
}

Но если вынеобходимо получить некоторую информацию на основе URL-адреса, лучше создать средство защиты маршрута, которое отправляет действие и затем использует store.selectOnce для получения необходимого значения из состояния. 

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot } from '@angular/router';
import { Store, ofAction } from '@ngxs/store';
import { Observable, of } from 'rxjs';
import { tap, map, catchError } from 'rxjs/operators';

import { GetProject } from './project.action';
import { ProjectState } from './project.state';

@Injectable({
  providedIn: 'root'
})
export class ProjectGuard implements CanActivate {

  constructor(private store: Store) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    const projectId = route.paramMap.get('projectId');

    // we call the store which downloads the project, we then wait for the action handler to return the project
    return this.store.dispatch(new GetProject(projectId)).pipe(
      // we convert the project to a boolean if it succeeded
      map(project => !!project),

      // we catch if the GetProject action failed, here we could redirect if we needed
      catchError(error => {
        return of(false);
      })
    );
  }
}

// маршруты приложения

{ path: 'project/:projectId', loadChildren: './project#ProjectModule', canActivate: [ProjectGuard] },
...