使用React和Redux传播运算符错误

Question

I'm fairly new to react and redux. I'm working on a reducer and running into compilation errors when trying to use the spread operator.

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;
  }
}

The specific error I'm getting is this. (inside the SUCCESS case)

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

Maybe I'm missing something extremely obvious, but can someone help me figure out what's going on?

EDIT: I'm using create-react-app, redux, and react-redux

Answer 1

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

not really sure what you're going for, here

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

maybe?

not specifying a key ( { someProp } ) is shorthand for { someProp: someProp } and requires simple keys (ie action.payload doesn't work)

either way, you need either a key there ie

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

or to replace entirely

chapters: action.payload

edit: I see your comment

given action.payload => { someId: { ... some payload ... } } ,

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

is probably pretty close to what you want. if you're also passing the mangaId as a field on the action ie { id: mangaId, payload: { ... some payload ... } } , then you'll want

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