@ngrx/effects

Effects are an RxJS powered side effect model for Store. Effects use streams to provide new sources of actions to reduce state based on external interactions such as network requests, web socket messages and time-based events.

Introduction

In a service-based Angular application, components are responsible for interacting with external resources directly through services. Instead, effects provide a way to interact with those services and isolate them from the components. Effects are where you handle tasks such as fetching data, long-running tasks that produce multiple events, and other external interactions where your components don't need explicit knowledge of these interactions.

Key Concepts

• Effects isolate side effects from components, allowing for more pure components that select state and dispatch actions.

• Effects are long-running services that listen to an observable of every action dispatched from the Store.

• Effects filter those actions based on the type of action they are interested in. This is done by using an operator.

• Effects perform tasks, which are synchronous or asynchronous and return a new action.

Installing with npm

For more information on using npm check out the docs here.

content_copynpm install @ngrx/effects --save

Installing with yarn

For more information on using yarn check out the docs here.

content_copyyarn add @ngrx/effects

Installing with ng add

If your project is using the Angular CLI 6+ then you can install the Effects to your project with the following ng add command (details here):

content_copyng add @ngrx/effects@latest

Optional ng add flags

• path - path to the module that you wish to add the import for the EffectsModule to.

• flat - Indicate if a directory is to be created to hold your effects file

• skipTests - When true, does not create test files.

• project - name of the project defined in your angular.json to help locating the module to add the EffectsModule to.

• module - name of file containing the module that you wish to add the import for the EffectsModule to. Can also include the relative path to the file. For example, src/app/app.module.ts

• minimal - By default true, only provide minimal setup for the root effects setup. Only registers EffectsModule.forRoot() in the provided module with an empty array.

• group - Group effects file within effects folder

This command will automate the following steps:

1. Update package.json > dependencies with @ngrx/effects.

2. Run npm install to install those dependencies.

3. Update your src/app/app.module.ts > imports array with EffectsModule.forRoot([AppEffects]). If you provided flags then the command will attempt to locate and update module found by the flags.