Ошибка оператора распространения с React и Redux

Question

Я довольно новичок, чтобы реагировать и сокращаться. Я работаю над редуктором и сталкиваюсь с ошибками компиляции при попытке использовать оператор распространения.

export default function chaptersReducer(
  state = { chapters: {}, isFetching: false, error: false },
  action = {},
) {
  switch (action.type) {
    case REQUEST:
      return { ...state, isFetching: true, error: false };
    case SUCCESS:
       return {
         ...state,
         chapters: {
           ...state.chapters,
           action.payload
         },
         isFetching: false
       };
    case FAILURE:
      return { ...state, isFetching: false, error: true };
    default:
      return state;
  }
}

Конкретная ошибка, которую я получаю, заключается в следующем. (внутри дела УСПЕХА)

Syntax error: Unexpected token, expected , (27:44)
> 27 |         chapters: {...state.chapters, action.payload},
     |                                             ^

Может быть, я упускаю что-то чрезвычайно очевидное, но может ли кто-нибудь помочь мне понять, что происходит?

РЕДАКТИРОВАТЬ: я использую create-реагировать-приложение, редукса и реагировать-редукса

Answer 1

chapters: {
    ...state.chapters,
    action.payload
},

не совсем уверен, что вы собираетесь, здесь

chapters: {
    ...state.chapters,
    ...action.payload
},

возможно

не указание ключа ({ someProp }) является сокращением для { someProp: someProp } и требует простых ключей (то есть action.payload не работает)

в любом случае, вам нужен либо ключ, то есть

chapters: {
    ...state.chapters,
    chapterN: action.payload
},

или полностью заменить

chapters: action.payload

изменить: вижу ваш комментарий

дано action.payload => { someId: { ... some payload ... } },

chapters: {
    ...state.chapters,
    ...action.payload
},

вероятно, довольно близко к тому, что вы хотите. если вы также передаете mangaId как поле в действии, т.е. { id: mangaId, payload: { ... some payload ... } }, то вам понадобится

chapters: {
    ...state.chapters,
    [action.mangaId]: action.payload
},