Angular 6 ngrx, how to add new item to array in state object?

Question

I have a simple situation, I have actions Like CreatUser, CreateSuccess, CreateFail. How should I add new object to array and when Create action is dispatched or CreateSuccess? And how should I do that?

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;
}

In code above I tried to add new user using push method, but it is not good solution. How should I do that?

Kliment Ru · Answer 1 · 2019-07-13T08:18:26.407

39

Try to use the spread operator because it creates a new array of users and does not mutate the previous array.

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

Or else use @ngrx/entity module for arrays. It's the best way.

Update 13.07.2019

New module @ngrx/data is available in NgRx 8. This module helps to create CRUD store for arrays with zero boilerplate.

edited Jul 13 '19 at 08:18

answered Aug 31 '18 at 07:36

Kliment Ru

2,057
13
16

1

Thanks, it is perfect answer. Could you also show me how to update one User? – Adam Adamski Aug 31 '18 at 07:50
In you reducer you need to findIndex of updated user, create new users array with spred operator, replace updated user and return new array. If you user @ngrx/entity or ngrx-data. You can use updateOne method. – Kliment Ru Aug 31 '18 at 08:43
Do you recommend using ngrx entity? – Adam Adamski Aug 31 '18 at 08:50
Yes its best way for arrays. Or try to use [angular-ngrx-data](https://github.com/johnpapa/angular-ngrx-data). its simplest then @ngrx/entity – Kliment Ru Aug 31 '18 at 08:53
spread operation for big arrays could be a problem – Deian Apr 30 '21 at 18:45

score 9 · Answer 2 · answered Aug 31 '18 at 06:32

9

Your state should be immutable therefore would be better to use

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

answered Aug 31 '18 at 06:32

Igor Litvinovich

2,436
15
23

score 6 · Answer 3 · answered Aug 13 '19 at 13:48

6

This is for those who is searching how to add item at the begining of the array in an immutable manner unlike using unshift operator which mutates the original. Placing new item at the begining of operation makes the magic

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

answered Aug 13 '19 at 13:48

sai amar

1,758
1
10
9

that would be a bad idea for big arrays... this spread creates new array and copies the data into it.. – Deian Apr 30 '21 at 18:33

score 6 · Answer 4 · edited Oct 15 '19 at 10:48

6

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

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

edited Oct 15 '19 at 10:48

RobC

22,977
20
73
80

answered Oct 15 '19 at 10:29

Manuel Gonzalez

71
1
2

Angular 6 ngrx, how to add new item to array in state object?

4 Answers4

Linked