web-dev-qa-db-ja.com

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メソッドを使用して新しいユーザーを追加しようとしましたが、それは良い解決策ではありません。どうすればいいですか？

angularngrxngrx-store
9
Adam Adamski

スプレッド演算子 を使用してみてください。ユーザーの新しい配列が作成され、以前の配列は変更されないためです。

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

または、配列に @ ngrx/entity モジュールを使用します。それが最良の方法です。

2019年7月7日更新

新しいモジュール @ ngrx/data はNgRx 8で利用可能です。このモジュールは、ボイラープレートのないアレイのCRUDストアを作成するのに役立ちます。

20
Kliment Ru

あなたの状態は不変でなければならないので、使用する方が良いでしょう

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

これは、元の配列を変更するunshift演算子を使用するのとは異なり、不変の方法で配列の先頭に項目を追加する方法を探している人向けです。運用開始時に新しいアイテムを配置すると、魔法が生まれます

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

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

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

0
Manuel Gonzalez