Обновление Реактивного состояния по определенному индексу меняет массив на объект

Question

У меня есть такая структура в моем состоянии:

state
  books {}  <-- object
    book    <-- array
      pages <-- array

В моем редукторе я пытаюсь получить доступ к массиву книг по индексу и заменить его массив страниц новым.Я наблюдаю значение Redux в моем Google Chrome до и после изменения значения.Он преобразует весь массив в объект. До того, как массив 'book' в redux выглядел следующим образом:

book: [{...}, {...}, {...}]

и после изменения:

book: {{0: {...}, 1: {...}, 2: {...}}

Как сохранить исходное отображениемоего объекта книги в редуксе?

Вот код в моем редукторе:

export interface MyState {
  book: BookItem[];
  pages: Pages[];
}

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: {
          ...state.book,
          [index]: {
            ...state.book[index],
            pages: newPages as Pages[]
          }
        }
    };
}

Answer 1

@ Ответ Габриэля Феррарини решает вашу проблему, поэтому я проголосовал за него.Но в качестве альтернативы картированию я хочу дать другой ответ.Поскольку у вас есть текущий индекс, вы можете использовать Object.assign для манипулирования страницами book.

function updatePages(index: number, state: MyState) {
  // newPages setup...
  return {
    ...state,
    book: Object.assign([], state.book, {
      [index]: { ...state.book[index], pages: newPages as Pages[] }
    })
  };
}

Мы используем Object.assign для манипулирования массивом с его индексом.Опять же, не изменяя исходное состояние (используя распространенный синтаксис), мы просто назначаем наши страницы как newPages для элемента book.

Answer 2

Можете ли вы попробовать это и посмотреть, работает ли оно?

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: state.book.map(bk => ({
            ...bk,
            pages: newPages as Pages[]
        }))
    };
}

Редактировать

function updatePages(index: number, state: MyState)  {
    // set up my new pages array here into newPages variable
    return {
        ...state,
        book: state.book.map((bk, idx) => ({
            ...bk,
            pages: idx === index ? newPages as Pages[] : bk.pages
        }))
    };
}