Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

@datorama/akita-ng-effects

Package Overview
Dependencies
2
Maintainers
22
Versions
9
Issues
File Explorer

Advanced tools

@datorama/akita-ng-effects

A Reactive State Management extension dealing with side effects.

    1.0.6latest
    GitHub

Version published
Maintainers
22
Weekly downloads
775
decreased by-22.34%

Weekly downloads

Readme

Source

Akita Effects

Akita's target is to provide a simple API that enables you to use object oriented patterns to manage state in your application. Introducing Effects into your app is entirely optional and allows you to implement very sophisticated event-based architectures

  • 🤓 Learn about it on the docs site
  • 🚀 See it in action on StackBlitz
  • 😎 Use the CLI

What is it?

Use effects to hook into your actions and act upon action events.

How to use it

Just register your effects in the 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 {}

Usage

Setup your actions, that the effects will listen for. The action events are published globally on the actions stream so every effect can listen for any action.

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

Use the effects to listen for any action event. You can publish other actions or run service tasks on any action event.

@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)) ); }

A possible use case for an action inside a guard.

@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) ); } }

Keywords

FAQs

Last updated on 10 Nov 2021

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc