Question

我有一个简单的情况，我有诸如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方法添加新用户，但这不是一个好的解决方案。我该怎么办？

Answer 1

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

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

否则将@ngrx/entity模块用于数组。这是最好的方法。

Answer 2

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

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

Answer 3

这是针对那些正在寻找如何以不变的方式在数组开头添加项目的人，而不是使用unshift运算符来改变原始内容。在操作开始时放置新物品就使神奇了

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

Answer 4

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

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

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

4 个答案: