Angular 6 ngrx, как добавить новый элемент в массив в объекте состояния?

У меня простая ситуация, у меня есть действия вроде 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, но это не очень хорошее решение. Как мне это сделать?


angular ngrx ngrx-store
person Adam Adamski    schedule 31.08.2018    source источник

Ответы (4)


arrow_upward
32
arrow_downward

Попробуйте использовать оператор распространения, потому что он создает новый массив пользователей и не изменяет предыдущий массив.

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

Или используйте модуль @ ngrx / entity для массивов. Это лучший способ.

Обновление 13.07.2019

Новый модуль @ ngrx / data доступен в NgRx 8. Этот модуль помогает создавать хранилище CRUD для массивов с нулем. шаблон.

person Kliment Ru    schedule 31.08.2018
comment
Спасибо, это прекрасный ответ. Не могли бы вы также показать мне, как обновить одного пользователя? - person Adam Adamski; 31.08.2018
comment
В вашем редукторе вам нужно найти индекс обновленного пользователя, создать новый массив пользователей с оператором spred, заменить обновленного пользователя и вернуть новый массив. Если вы используете @ ngrx / entity или ngrx-data. Вы можете использовать метод updateOne. - person Kliment Ru; 31.08.2018
comment
Вы рекомендуете использовать сущность ngrx? - person Adam Adamski; 31.08.2018
comment
Да, это лучший способ для массивов. Или попробуйте использовать angular-ngrx-data. его простейший тогда @ ngrx / entity - person Kliment Ru; 31.08.2018
comment
операция распространения для больших массивов может быть проблемой - person Deian; 30.04.2021

arrow_upward
8
arrow_downward

Ваше состояние должно быть неизменным, поэтому лучше использовать

users: state.users.concat(action.payload)
person Igor Litvinovich    schedule 31.08.2018

arrow_upward
5
arrow_downward

Это для тех, кто ищет, как добавить элемент в начало массива неизменным образом, в отличие от использования оператора unshift, который изменяет оригинал. Размещение нового предмета в начале работы делает волшебство

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

person sai amar    schedule 13.08.2019
comment
это было бы плохой идеей для больших массивов ... этот разворот создает новый массив и копирует в него данные .. - person Deian; 30.04.2021

arrow_upward
4
arrow_downward 

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

См .: https://ngrx.io/guide/store/configuration/runtime-checks < / а>

person Manuel Gonzalez    schedule 15.10.2019