Question

我正在使用Angular ngrx8。并且我对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将元素添加到存储中的数组

2 个答案: