NGRX 8 将元素添加到存储中的数组

Question

我正在使用 Angular ngrx 8。我对 redux 有疑问。

当我有以下界面时：

export interface PersonChecklist {
    personName: string;
    isChecked: boolean;
}

我想在商店中添加人物数组。

操作：

export const savePersonToChecklist = createAction(
    '[PERSON_API] Save person to checklist array',
    props<{
        personName: string;
    }>()
);

减速器：

on(savePersonToChecklist, (state, action) => ({
        ...state,
        jobStatus: {
            ...state.jobStatus,
            personsReadyForChecklist:
                [
                    {
                        ...state.jobStatus.personsReadyForChecklist,
                        personName: action.personName,
                        isChecked: true
                    }
                ]

        }
    }))

我为每个调度操作保存了嵌套条目...我想要以下结构：

[
{personName: 'A',
 isChecked: true},
{personName: 'B',
 isChecked: true},
.
.
.]

Answer 1

[
      ...state.jobStatus.ordersReadyForChecklist,
                {
                    personName: action.personName,
                    isChecked: true
                }
  ]

并尝试在操作中使用负载，这是一个很好的做法。例如：

{payload: {personName: string}}

Answer 2

您需要解决一些问题才能使其正常工作：

on(savePersonToChecklist, (state, action) => ({
    ...state,
    jobStatus: {
      ...state.jobStatus,
      ordersReadyForChecklist: [
        ...state.jobStatus.ordersReadyForChecklist,   // <-- This needs to be here
        {
          personName: action.personName,   // <-- This needs to be "personName" not "workOrderNumber"
          isChecked: true
        }
      ]
    }
}))

我已经在 stackblitz 上创建了一个工作示例，希望我猜对了您的要求...

希望对您有所帮助。

NGRX 8 将元素添加到存储中的数组

NGRX 8 add element to array in store

angular

ngrx

ngrx-store