ngrx - 当 ngrx store state 包含 Map 时，为什么无法识别对此 Map 的更改？

Question

我根据他们的示例应用迁移到 Ngrx Store v4.1.1 (+ Angular5)。一切都像以前一样运行良好，但只有一个 SubStore。该 SubStore 的状态包含一个已更改的 Map。但是不知何故无法识别对此 map 的更改。

可以在此处找到工作 Plunker:https://plnkr.co/edit/2Z77Cq?p=preview
详细代码如下

我的 NgModule 看起来像这样:

import {reducers} from './reducers';

@NgModule({
   imports: [ 
     BrowserModule,
     StoreModule.forRoot(reducers) 
   ],
   declarations: [ App ],
   bootstrap: [ App ],
   providers: [Service]
})

我的 reducer 看起来像这样:

import {
  ActionReducerMap,
  createSelector,
  createFeatureSelector,
} from '@ngrx/store';

import * as character from './character.reducer';

export interface State {
  character: character.State;
}

export const reducers: ActionReducerMap<State> = {
  character: character.reducer,
};

/** Character **/
export const getCharacterState = createFeatureSelector<character.State>('character');

export const getCharacter = createSelector(
  getCharacterState,
  character.getCharacter
);

SubStore Reducer 包含以下代码:

import { Character, Item } from './models';
import * as character from './character';

export interface State {
  character: Character;
}

export const initialState: State = {
  character: null,
};

export function reducer(state = initialState, action:character.Actions): State {
  switch (action.type) {
    case character.INIT_CHARACTER:
      const char: Character = action.payload;
      state.character = char;
      console.log('init char', char);
      return Object.assign({}, state);

    case character.EQUIP_ITEM:
      const eqItem: Item = action.payload;
      state.character.wardrobeItemIds.set(eqItem.part, eqItem.id);
      console.log('eq ITEMMM', eqItem, state.character.wardrobeItemIds);
      return Object.assign({}, state);

    default:
      return state;
  }
}

export const getCharacter = (state: State) => state.character;

相应的操作是:

import { Action } from '@ngrx/store';
import { Character, Item } from './models';

export const INIT_CHARACTER = '[Character] Initialized Character';
export const EQUIP_ITEM = '[Character] Equipped Item';

export class InitCharacter implements Action {
  readonly type = INIT_CHARACTER;
  constructor(public payload: Character) {}
}

export class EqItem implements Action {
  readonly type = EQUIP_ITEM;
  constructor(public payload: Item) {}
}

export type Actions =
  InitCharacter |
  EqItem;

现在我在我的服务中用一个新角色初始化 SubStore:

import { Injectable } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import {Character, Item} from './models';

import * as fromRoot from './reducers.ts';
import * as CharacterAction from './character.ts';

@Injectable()
export class Service {
  character$: Observable<Character>;

  constructor(
    private store: Store<fromRoot.State>
  ) {
    // listen to the store
    this.character$ = this.store.select(fromRoot.getCharacter);

    this.character$.subscribe(
      (state: any) => console.log('char store triggered. State:', state)
    );

    // init the wardrobeItemIds Map
    const wardrobeItemIds = new Map<string, string>();
    wardrobeItemIds.set('part1', 'anyId');

    // init the character (this is just a dummy)
    let newCharacter: Character = {
      baseType: 'anyString',
      skinItemIds: [
        'string1',
        'string2'
      ],
      wardrobeItemIds: wardrobeItemIds
    }
    this.store.dispatch(new CharacterAction.InitCharacter(newCharacter));
  }

  addItem(part: string): void {
    // add rnd item of given part
    const item: EquipItem = {
      id: Math.random().toString(),
      part: part,
    }
    this.store.dispatch(new CharacterAction.EqItem(item));
  }
} 

这导致我在同一服务中订阅

this.character$.subscribe(
  (state: any) => console.log('char store triggered. State:', state)
);

记录字符，这很好，因为它从空更改为字符对象。

现在如果我打电话 addItem()其中调用 this.store.dispatch(new CharacterAction.EqItem(item));这应该向 map 添加一个项目 state.character.wardrobeItemIds .

这应该会导致 Store Observable 再次触发，并且订阅应该记录更改的字符。但不知何故什么也没有发生。
已经检查过 reducer 是否正确接收到 Action。

不确定这只是我的愚蠢还是某种错误？

提前谢谢
托比

Answer 1

@ngrx/entity 似乎是存储中更复杂数据结构的预期解决方案。如果您打开它们，使用 Map 将触发新的运行时检查，因为它们既不是不可变的，也不是可序列化的。