秋田效应

秋田的目标是提供一个简单的API,使您能够使用面向对象的模式来管理应用程序中的状态. 在您的应用程序中引入效果是完全可选的, 允许您执行非常复杂的事件架构

• ~ 学习它 文件站点
• 在行动上看 堆叠布立茨
• 使用 国 际

这是什么?

使用效果连接到您的动作,并在动作事件时采取行动.

怎样用

在AkitaNgeffectsModule上记录一下你的效应.

// Only use .forRoot() once in your base module.
@NgModule({
  imports: [
    CommonModule, 
    AkitaNgEffectModule.forRoot([NavigationEffects])
  ],
})
export class CoreDataModule {}

// Use .forFeature() on any feature module
@NgModule({
  imports: [
    CommonModule, 
    AkitaNgEffectModule.forFeature([NavigationEffects])
  ],
})
export class FeatureModule {}

使用量

安排你的动作, 效果会听. 行动活动在全球发布在行动流上,以便每一种效果都能听到任何行动.

export const LOAD_MAIN_NAVIGATION = createAction('Load Main Navigation');
export const LOAD_MAIN_NAVIGATION_SUCCESS = createAction(
  'Load Main Navigation Success', 
  props<{ mainNav: MainNavigation }>()
);

使用效果来听到任何动作事件 。 您可以在任何动作事件上发布其它动作或运行服务任务.

@Injectable({
  providedIn: 'root',
})
export class NavigationEffects {
  constructor(
    // inject the actions stream
    private actions$: Actions, 
    private navigationService: NavigationService, 
    private store: NavigationStore
  ) {}

  // can also be immplemented with createEffect() function
  @Effect()
  loadMainNavigation$ = this.actions$.pipe(
    ofType(LOAD_MAIN_NAVIGATION),
    switchMap(() => this.navigationService.LOAD_MAIN_NAVIGATION().pipe(
      tap(mainNav => this.actions$.dispatch(loadMainNavigationSuccess({ mainNav }))))
    )
  );

  @Effect()
  loadMainNavigationSuccess$ = this.actions$.pipe(
    ofType(loadMainNavigationSuccess),
    map(({ mainNav }) => this.navigationService.updateNavigationTree(mainNav)),
    tap(mainRoutes => this.store.updateNavigation(mainRoutes))
  );
}

一个可能的用例 一个在警卫内部的行动.

@Injectable({
  providedIn: 'root',
})
export class InitRouterGuard implements CanActivate {
  constructor(
    private navigationQuery: NavigationQuery, 
    private actions: Actions
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
    return this.navigationQuery.isNavInitialized$.pipe(
      tap((isInit) => {
        if (!isInit) this.actions.dispatch(loadMainNavigation());
      }),
      filter(isInit => isInit),
      map((val) => true)
    );
  }
}