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

【问题标题】：Why is ngrx storing only first element of an array?为什么ngrx只存储数组的第一个元素？
【发布时间】：2018-07-12 12:23:49
【问题描述】：

我有一个从我的 REST 服务接收到的数组，并试图将它存储在我的 ngrx 存储中。查看我的减速器，我可以将数组的每个元素打印到控制台。但是，一旦我将它存储在 state 中，它就会被简化为单个元素。

这是我在 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
      };
      ...
}

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

[{"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));

【问题讨论】：

这项工作是否有效：项目：[...action.items]
不，我仍然只得到我所在州的数组的第一个元素
你能提供你的状态和动作吗？
@Amsakanna 更新了请求的代码示例

标签： javascript arrays angular ngrx

【解决方案1】：

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

【讨论】：

那是意图，而不是实际效果。上面的代码肯定修改了我的实际商店，而不仅仅是组件。

【解决方案2】：

布兰登，

我知道文档说商店是不可变的，但这不是我的经验。也许我错过了一些东西。我已经为一个看起来和这个完全一样的错误浪费了太多时间。

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

【讨论】：