NGRX 8 добавить элемент в массив в хранилище

Question

Я работаю с Angular ngrx 8. И у меня проблема с редуксом.

Когда у меня есть интерфейс ниже:

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

Есть пара вещей, которые необходимо исправить, чтобы эта работа работала правильно:

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 , надеюсь, я правильно угадал ваши требования...

Надеюсь, это поможет.

Answer 2

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

И попробуйте использовать полезную нагрузку в действии, это хорошая практика. например:

{payload: {personName: string}}