Question

我有一个从我的REST服务收到的数组，并且我试图将它存储在我的ngrx商店中。查看我的reducer，我可以打印到控制台的每个元素的元素。但是，只要我将它存储在状态中，它就会缩减为单个元素。

这是我在reducer中得到的数组：

[
  {"key1": "value1", "key2": "value2"},
  {"key3": "value3", "key4": "value4"},
  {"key5": "value5", "key6": "value6"},
  {"key7": "value7", "key8": "value8"}
]

以下是我在reducer中使用的代码：

switch (action.type) {
    ...
    case actions.GET_ITEMS_COMPLETE:
      console.log('the array');
      console.log(action.items);
      console.log('indiviual items');
      console.log(action.items[0]);
      console.log(action.items[1]);
      console.log(action.items[2]);
      console.log(action.items[3]);
      return {...state,
        items: action.items
      };
      ...
}

请注意，我能够毫无问题地将数组的每个元素打印到控制台，但是当我打印数组并在reducer完成后检查状态时，我看到数组如下：

[{"key1": "value1", "key2": "value2"}]

任何人都可以解释为什么其他3个元素被莫名其妙地从数组中删除了吗？

更新这里要求的是与reducer一起使用的操作，效果，选择器和服务，以将项目持久保存到状态：

操作

export const GET_ITEMS = '[Items] GET_ITEMS';
export const GET_ITEMS_COMPLETE = '[Items] GET_ITEMS_COMPLETE';
export const GET_ITEMS_ERROR = '[Items] GET_ITEMS_ERROR';
export class GetItemsAction implements Action {
  readonly type = GET_ITEMS;

  constructor() { }
}
export class GetItemsCompleteAction implements Action {
  readonly type = GET_ITEMS_COMPLETE;

  constructor(public items: Array<Item>) { }
}
export class GetItemsErrorAction implements Action {
  readonly type = GET_ITEMS_ERROR;

  constructor(public error: Response) { }
}

效果

  @Effect()
  getItems$ = this.actions$
    .ofType(itemActions.GET_ITEMS)
    .map(action => itemActions.GetItemsAction)
    .switchMap(() => {
      return this.api.item.getAll()
        .map(returnedItems => new itemActions.GetItemsCompleteAction(returnedItems))
        .catch(error => Observable.of(new itemActions.GetItemsErrorAction(error)))
    });

选择

export function getItems(): Selector<AppState, Array<Item>> {
  return state$ => state$.map(state => state.item.items);
}

服务

@Injectable()
export class ItemService {
  itmes$: Observable<Array<Item>>;

  constructor(private store$: Store<AppState>) {
    this.items$ = store$.let(getItems());
  }

  getItems() {
    this.store$.dispatch(new GetItemsAction());
  }

}

更新2 在我的item对象的一个订阅中发现了问题。如下所示，那里有一个拼接，除了第一个元素之外的所有东西都被移除了。现在我的问题是这个订阅的拼接如何修改我的状态？是不是ngrx中的状态应该是不可变的？

this.itemService.items$.subscribe(value => this.items = value.splice(1,3));

Answer 1

布兰登，

我知道文档说商店是不可改变的，但这不是我的经验。也许我错过了什么。我已经失去了太多时间来看一个看起来和这个完全一样的bug。

要使其不可变，您必须使用第三方软件包。也许是Immutable.js，或者ngrx-store-freeze。

Answer 2

上面的代码不会修改你的ngrx状态，它会修改组件的状态，特别是组件ActorService属性。

为什么ngrx只存储数组的第一个元素？

2 个答案: