Почему мой редуктор вызывается несколько раз, когда я отправляю действие после импорта магазина для функции? - PullRequest
Новая
       52

Почему мой редуктор вызывается несколько раз, когда я отправляю действие после импорта магазина для функции?

0 голосов
/ 10 ноября 2019

Я новичок в ngrx, и я пытаюсь получить состояние для каждого из моих функциональных модулей, а также состояние для модуля приложения. Во-первых, я зарегистрировал StoreModule и его эффекты в app.module.ts, например: 

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    StoreModule.forRoot({app: fromApp.reducer}),
    EffectsModule.forRoot([AppEffectsService])
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Затем я создал модуль под названием home с сервисом редукторов и эффектов и использовал их следующим образом: 

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    HomeRoutingModule,
    StoreModule.forFeature(fromHome.homeFeatureKey, fromHome.reducer),
    EffectsModule.forFeature([HomeEffectsService]),
  ]
})
export class HomeModule { }

Я положил console.log в свой домашний редуктор и видел, что каждый раз, когда я отправляю действие, я вижу журнал дважды за действие! Я не знаю, почему мой редуктор вызывается дважды за отправку. И даже когда я добавляю хранилище для большего количества модулей, я вижу больше повторяющихся логов.

Редуктор выглядит так: 


const homeReducer = createReducer(
    initialHomeState,
    on(HomeActions.loadOrderTypesSuccess, (state, { orderTypes }) => ({ ...state, orderTypes })),
);

export function reducer(state: HomeState | undefined, action: Action) {
    console.log(action.type);
    return homeReducer(state, action);
}

И это мой эффект: 

  loadOrderTypes$ = createEffect(() => this.actions$.pipe(
    ofType(HomeActions.loadOrderTypes),
    mergeMap(() => from(this.dataService.getOrderTypes())
      .pipe(
        map(orderTypes => HomeActions.loadOrderTypesSuccess({ orderTypes })),
        catchError(error => of(HomeActions.loadOrderTypesFailure({ error }))),
      )
    )
  ));

Создание действий: 

export const loadOrderTypes = createAction(
    '[Home Page] Load order type start'
);

export const loadOrderTypesSuccess = createAction(
    '[Home Page] Load order type success',
    props<{ orderTypes: OrderType[] }>()
);

export const loadOrderTypesFailure = createAction(
    '[Home Page] Load order type failure',
    props<{ error: any }>()
);

После отправки действия журнал выглядит так: 

@ngrx/store/init
15:23:36.470 app.reducer.ts:22 @ngrx/effects/init
15:23:36.505 core.js:38781 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
15:23:36.608 app.reducer.ts:22 @ngrx/store/update-reducers
15:23:36.609 home.reducer.ts:35 @ngrx/store/update-reducers
15:23:36.644 app.reducer.ts:22 [Home Page] Load order type start
15:23:36.644 home.reducer.ts:35 [Home Page] Load order type start
15:23:36.761 client:52 [WDS] Live Reloading enabled.
15:23:37.743 app.reducer.ts:22 [Home Page] Load order type success
15:23:37.744 home.reducer.ts:35 [Home Page] Load order type success

Я хочу, чтобы мой редуктор был вызван один раз. Что я делаю не так?

1 Ответ

0 голосов
/ 10 ноября 2019

Действие отправляется всем редукторам, это по замыслу.

Мы не можем знать, какие редукторы вызывать, потому что совершенно нормально изменять состояние на основе действия из другого модуля.

...