Ngrx effects: Actions sent by one effect processed immediately by other effects?

Question

I have an Angular (2) application with four ngrx actions:

• START
  • Not processed by gearbox (no change in state)
  • ngrx The effect calls an asynchronous task and displays the value SUCCESS or ERROR
• SUCCESS
  • Machined by gearbox
  • ngrx Effect Cards for ADVANCE
• ADVANCE
  • Not processed by gear
  • ngrx Effect moves to a different route
• ERROR
  • Machined by gearbox
  • No effect

The problem is that the Effect that captures ADVANCE seems to work up to the gearbox that handles SUCCESS

Here is the Effect Code:

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .map(result => ({type: 'SUCCESS', payload: result}))
        .catch(error => ({type: 'ERROR', payload: error})));

@Effect() success$ = this.actions$
    .ofType('SUCCESS')
    .map(() => ({type: 'ADVANCE'}));

@Effect({dispatch: false}) advance$ = this.actions$
    .ofType('ADVANCE')
    .withLatestFrom(this.store$.select(state => state.route))
    .map(action_route => action_route[1])
    .do(route => this.router.navigate([route.foo.bar]));

The error I get is Cannot read property 'bar' of null. The property foois set by a reducer that handles SUCCESS.

If you add a delay to the SUCCESS effect, everything will work well:

@Effect() success$ = this.actions$
    .ofType('SUCCESS')
    .delay(1)
    .map(() => ({type: 'ADVANCE'}));

.

console.log , :

• SUCCESS
• ADVANCE ( route.foo === null)
• SUCCESS ( route.foo === -)

, SUCCESS SUCCESS ADVANCE.

- ?

, , ?

---

:

• @angular/cli: 1.0.0-beta.32.3
• node: 7.5.0
• os: darwin x64
• @angular/common: 2.4.7
• @angular/: 2.4.7
• @angular/core: 2.4.7
• @angular/forms: 2.4.7
• @angular/http: 2.4.7
• @angular/ : 2.4.7
• @angular/platform-browser-dynamic: 2.4.7
• @angular/router: 3.4.7
• @angular/cli: 1.0.0-beta.32.3
• @angular/compiler-cli: 2.4.7
• @ngrx/core @1.2.0
• @ngrx/effects @2.0.0
• @ngrx/ @2.2.1
• rxjs: 5.1.1

Answer 1

:

• - ?

• , , - .

• , , ?

• , , -, ,

, , . , , . , - , , , , .

, , , SUCCESS ADVANCE.

-, store- rxjs-:

• https://github.com/ngrx/effects/issues/58
• https://github.com/ngrx/store/issues/279
• /ReactiveX/rxjs/issues/2155 ( )

, :)

Answer 2

, .map START .concatMap SUCCESS ACTION .

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .concatMap(result => {
            return Observable.from([type: 'SUCCESS', payload: result,
                                    type: 'ADVANCE'])
        .catch(error => ({type: 'ERROR', payload: error})));

Answer 3

ngex/effects - , .

, , "" , - . effecs, , , .

, ? , , - . , , , . , , . - :

@Effect() start$ = this.actions$
    .ofType('START')
    .map(toPayload)
    .switchMap(input => doAsyncTask(input)
        .map(result =>{
               this.store$.dispatch(
               {type: 'SUCCESS',
                payload: result
                });
               this.store$.dispatch(
               {type: 'ADVANCE'})

}

        .catch(error => ({type: 'ERROR', payload: error})));

Do you see what I'm doing here? I removed an intermediate product that intercepts "success", so not "success" gets into the gearbox. Immediately after that, it sends another action of the type “forward”, which should hit your facility after the “success” is processed.

Hope this helps.