Question

我根据他们的example-app迁移到Ngrx Store v4.1.1（+ Angular5）。一切都运行良好，但一个SubStore。 SubStore的状态包含一个已更改的Map。但是这个地图的变化在某种程度上无法识别。

可以在此处找到Working 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]
})

我的减速机看起来像那样：

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)
);

记录字符，这很好，因为它从null更改为字符Object。

现在，如果我致电addItem()，则会调用this.store.dispatch(new CharacterAction.EqItem(item));，这会将项目添加到地图state.character.wardrobeItemIds。

这会导致Store Observable再次触发，订阅应记录更改的字符。但不知何故没有任何反应。已经检查过reducer是否正确接收了Action。

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

提前谢谢托比

Answer 1

@ ngrx / entity似乎是商店中更复杂的数据结构的预期解决方案。如果您将其启用，则使用Map将触发新的运行时检查，因为它们都不是不可更改且不可序列化的。

当ngrx存储状态包含Map时，为什么无法识别此Map的更改？

1 个答案: