NgRx狀態添加/更新為數組並保持同步

Question

如果需要添加多個對象，如何使用ngrx更新狀態？

例如，在下面的示例中，一個用戶可以與多個任務相關聯。

當前，當所有任務都返回時，存儲將更新兩次，並且在每次更新時，最后一個任務將被新任務替換。 這是預期的行為，但是您將如何初始化數組並捕獲更新以將狀態表示為對象數組並確保其保持同步 ？

任務減少器

import * as TaskActions from './task.actions';
import { Action, createReducer, on } from '@ngrx/store';
import { ITask } from '../../models/task';

export interface State {
  task: ITask | null;
  error: any;
}

const initialState: ITask = {
  basketTotal: 0,
  carePlanPrice: 0,
  category: null,
  completionDate: null
};

export const taskReducer = createReducer(
  initialState,
  on(TaskActions.getData, state => ({ ...state })),
  on(TaskActions.dataReceived, (state, payload) => ({ ...state, payload })),
  on(TaskActions.dataNotReceived, state => ({ ...state })),
  on(TaskActions.signOut, state => ({ ...state })),
  on(TaskActions.signOutSuccess, state => ({ ...state, ...initialState })),
);

export function reducer(state: ITask | undefined, action: Action) {
  return taskReducer(state, action);
}

任務效果

  @Effect()
  getData$ = this.actions$.pipe(
    ofType(TaskActions.getData),
    switchMap(() => {
      return this.afs.collection<ITask>('tasks', ref =>
        ref.where('createdBy', '==', localStorage.getItem('uid'))).stateChanges().pipe(
      );
    }),
    mergeMap(actions => actions),
    map(action => {
      if (action.payload) {
        return TaskActions.dataReceived({ payload: TaskService.parseData(action.payload.doc.data()) });
      } else {
        return TaskActions.dataNotReceived();
      }
    })
  );

task.actions.ts

import { createAction, props } from '@ngrx/store';
import { ITask } from '../../models/task';

export const getData = createAction('[Task] Get Data');
export const dataReceived = createAction('[Task] Data Received', props<{ payload: Partial<ITask> }>());
export const dataNotReceived = createAction('[Task] Data Not Received');
export const signOut = createAction('[Task] Sign Out');
export const signOutSuccess = createAction('[Task] Sign Out Success');

更新：

我試過了

on(TaskActions.dataReceived, (state, payload) => 
  ({ 
      ...state, 
      tasks: [...state.tasks,  payload.payload ] 
  })),

結果是：

我期待有一個包含兩個項目的數組：

task: [
  { ... }, { ... }
]

Answer 1

擴展語法也可以用於數組以創建克隆。

on(TaskActions.dataReceived, (state, payload) => 
  ({ 
      ...state, 
      tasks: payload.condition ? [...state.tasks,  payload.newTask ] : []
  })),

請參閱Spread語法文檔