web-dev-qa-db-fra.com

Angular 6 ngrx, comment ajouter un nouvel élément au tableau dans un objet d'état?

J'ai une situation simple, j'ai des actions comme CreatUser, CreateSuccess, CreateFail. Comment dois-je ajouter un nouvel objet au tableau et quand l'action Create est envoyée ou CreateSuccess? Et comment dois-je faire ça?

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

Dans le code ci-dessus, j'ai essayé d'ajouter un nouvel utilisateur à l'aide de la méthode Push, mais ce n'est pas une bonne solution. Comment dois-je faire ça?

angularngrxngrx-store
9
Adam Adamski

Essayez d'utiliser opérateur d'étalement car il crée un nouveau tableau d'utilisateurs et ne mute pas le tableau précédent.

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

Ou bien utilisez @ ngrx/entity module pour les tableaux. C'est la meilleure façon.

Mise à jour 13.07.2019

Nouveau module @ ngrx/data est disponible dans NgRx 8. Ce module permet de créer un magasin CRUD pour les tableaux avec zéro passe-partout.

20
Kliment Ru

Votre état devrait être immuable, il serait donc préférable d'utiliser

users: state.users.concat(action.payload)
6
Igor Litvinovich

C'est pour ceux qui cherchent comment ajouter un élément au début du tableau d'une manière immuable contrairement à l'utilisation de l'opérateur unshift qui mute l'original. Placer un nouvel objet au début de l'opération rend la magie

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

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

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

0
Manuel Gonzalez