Angular 6 ngrx，如何向状态对象中的数组添加新项目？

Question

我有一个简单的情况，我有像创建用户、创建成功、创建失败这样的动作。当Create操作被派发或CreateSuccess时，我应该如何将新对象添加到数组中？我该怎么做呢？

export function reducer(state = init, action: Actions): State {
switch (action.type) {
    case ActionsTypes.CREATE:
        return {
            ...state,
            inProgress: true
        };
    case ActionsTypes.CREATE_SUCCESS:
        return {
            ...state,
            users: state.users.push(action.payload),
            inProgress: false
        };
    case ActionsTypes.CREATE_FAIL:
        return {
            ...state,
            error: action.payload,
            inProgress: false
        };
    default:
        return state;
}

在上述代码中，我尝试使用push方法添加新用户，但这不是一个好的解决方案。我应该怎么做？

- Adam Adamski

Answer 1

尝试使用扩展运算符，因为它会创建一个新的用户数组，而不会改变先前的数组。

users: [...state.users, action.payload]

否则使用@ngrx/entity模块来处理数组，这是最好的方法。

更新于2019年7月13日：

在NgRx 8中提供了新的@ngrx/data模块，该模块可帮助创建零样板文件的CRUD存储器。

- Kliment Ru

---

谢谢，这是完美的答案。你能给我展示一下如何更新一个用户吗？ - Adam Adamski

在你的reducer中，你需要使用findIndex方法找到更新后的用户，然后使用扩展运算符创建一个新的用户数组，替换更新后的用户并返回新的数组。如果你使用@ngrx/entity或ngrx-data，你可以使用updateOne方法。 - Kliment Ru

你推荐使用ngrx entity吗？ - Adam Adamski

是的，这是数组的最佳方式。或者尝试使用angular-ngrx-data。它比@ngrx/entity更简单。 - Kliment Ru

大数组的展开操作可能会成为一个问题。 - Deian

Answer 2

你的状态应该是不可变的，因此最好使用

users: state.users.concat(action.payload)

- Igor Litvinovich

Answer 3

export const reducer = createReducer(initialState,
  on(addTodo, (state, { todo }) => ({
    ...state,
    todoInput: '',
    todos: [...state.todos, todo]
  }))
);

请参见：https://ngrx.io/guide/store/configuration/runtime-checks

- Manuel Gonzalez

Answer 4

对于那些想要以不可变的方式添加数组开头项而不使用会改变原始数据的unshift操作符的人，可以参考以下内容。在开头放置新项目是一种魔法操作。

users: [action.payload,...state.users]

- sai amar

---

这对于大数组来说是个不好的主意... 这个扩展操作会创建一个新的数组并将数据复制到其中。 - Deian