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

Posted 2023-02-19

【中文标题】Angular 6 ngrx，如何将新项目添加到状态对象的数组中？

【英文标题】：Angular 6 ngrx, how to add new item to array in state object?

【发布时间】：2019-02-06 03:11:19

【问题描述】：

我有一个简单的情况，我有像 CreatUser、CreateSuccess、CreateFail 这样的操作。我应该如何将新对象添加到数组以及何时调度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 方法添加新用户，但这不是一个好的解决方案。我该怎么做？

【参考方案1】：

尝试使用spread operator，因为它会创建一个新的用户数组并且不会改变之前的数组。

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

或者使用@ngrx/entity 模块作为数组。这是最好的方法。

13.07.2019 更新

新模块 @ngrx/data 在 NgRx 8 中可用。该模块有助于为具有零样板的数组创建 CRUD 存储。

【讨论】：

谢谢，这是完美的答案。你能告诉我如何更新一个用户吗？

在你的 reducer 中，你需要找到更新用户的索引，使用 spred 运算符创建新用户数组，替换更新用户并返回新数组。如果您使用 @ngrx/entity 或 ngrx-data。您可以使用 updateOne 方法。

你推荐使用ngrx实体吗？

是的，它是数组的最佳方式。或者尝试使用angular-ngrx-data。最简单的然后@ngrx/entity

大数组的扩展操作可能是个问题

【参考方案2】：

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

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

【参考方案3】：

这适用于那些正在搜索如何以不可变方式在数组开头添加项目的人，这与使用改变原始操作的 unshift 运算符不同。 在操作开始时放置新项目会产生魔力

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

【讨论】：

这对于大数组来说是个坏主意...这种传播会创建新数组并将数据复制到其中..

【参考方案4】：

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

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