Ngrx /数据似乎干扰减速器

Question

我是Ngrx的新手，所以我假设我做错了什么。 看来，如果Ngrx / data处于活动状态，则它将干扰状态历史记录，从而导致以未定义的初始状态调用reducer。

如果我在根目录中有多个状态，这是显而易见的。 一种状态的还原器会影响另一种状态。

我创建了一个小应用程序来演示该问题。 我将EntityDataModule添加到我的模块文件中，如下所示：

  imports: [
    BrowserModule,
    HttpClientModule,
    EntityDataModule.forRoot({ entityMetadata: { Hero: {} }, pluralNames: { Hero: 'Heroes' }}),
    BrowserAnimationsModule,
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],

这是我的商店代码：

import { ActionReducerMap, createAction, createReducer, createSelector, on, props } from '@ngrx/store';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';

export interface FirstState {
  value: string;
}

export interface SecondState {
  value: string;
}

export interface State {
  first: FirstState;
  second: SecondState;
}

const initialFirstState: FirstState = {
  value: 'firstValue'
};

const initialSecondState: SecondState = {
  value: 'secondValue'
};

export const selectFirstState = (state: State) => state.first;
export const selectSecondState = (state: State) => state.second;

export const selectFirstValue = createSelector(selectFirstState, (state: FirstState) => state.value);
export const selectSecondValue = createSelector(selectSecondState, (state: SecondState) => state.value);

export const indirectAction = createAction(
  '[Indirect] Use Effects',
);

export const firstValueSet = createAction(
  '[First] Set Value',
  props<{ theValue: string }>()
);

export const secondValueSet = createAction(
  '[Second] Set Value',
  props<{ theValue: string }>()
);

export const firstReducer = createReducer(
  initialFirstState,
  on(firstValueSet, (state, { theValue }) => ({ ...state, value: theValue }))
);

export const secondReducer = createReducer(
  initialSecondState,
  on(secondValueSet, (state, { theValue }) => ({ ...state, value: theValue }))
);

export const reducers: ActionReducerMap<State> = {
  first: firstReducer,
  second: secondReducer
};

@Injectable()
export class EffectService {
  constructor(private actions$: Actions) {}

  indirect$ = createEffect(() => this.actions$.pipe(
    ofType(indirectAction),
    map(action => secondValueSet({ theValue: 'INDIRECT' }))
  ));
}

我在这里创建了一个Stackblitz应用程序： https ://stackblitz.com/edit/angular-bttdek

如果单击任何按钮，则仅调度操作：

  setFirstValue() {
    this.store.dispatch(firstValueSet({ theValue: 'S1:' + Math.random() }));
  }

  setSecondValue() {
    this.store.dispatch(secondValueSet({ theValue: 'S2:' + Math.random() }));
  }

  indirect() {
    this.store.dispatch(indirectAction());
  }

您将看到另一个状态被重置为初始状态。 如果我从模块中删除EntityDataModule.forRoot（），它将正常工作。 因此，似乎仅激活EntityDataModule会在存储中引起问题。 我遍历了存储，发现到最新的未提交状态的索引是一对一的，导致以未定义的初始状态调用化简器。

激活EntityDataModule

如果我这样删除EntityDataModule：

  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    StoreModule.forRoot(reducers),
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],

它的工作原理： 禁用EntityDataModule

我在配置错误吗？

Answer 1

必须首先加载存储模块，这将解决您的问题：

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    BrowserAnimationsModule,
    // ---
    StoreModule.forRoot(reducers),
    EntityDataModule.forRoot({ entityMetadata: { Hero: {} }, pluralNames: { Hero: 'Heroes' }}),
    // ---
    EffectsModule.forRoot([ EffectService ]),
    StoreDevtoolsModule.instrument(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }