Spread operator error with React and 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

Why are you using ...state.chapters? Should it not just be ...state or state.chapters. Why are you using a spread operator on chapters? — Thomas Darvik
– Thomas Darvik, Commented May 6, 2018 at 1:48
The data coming from my API is structured like { mangaId: [{ chapterObjects }] }. My intention was if chapters is empty, add the payload, if mangaIds conflict, overwrite the old data.Perhaps I'm misunderstanding how to do that correctly? — Alex
– Alex, Commented May 6, 2018 at 1:53
Correction: if chapters[mangaId] doesn't exist, add the payload, if it does, overwrite the previous array of mangaIds — Alex
– Alex, Commented May 6, 2018 at 2:00

Tyler Sebastian · Accepted Answer · 2018-05-06 01:55:56Z

3

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 (i.e. action.payload doesn't work)

either way, you need either a key there i.e.

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 i.e. { id: mangaId, payload: { ... some payload ... } }, then you'll want

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

edited May 6, 2018 at 1:55

answered May 6, 2018 at 1:50

Tyler Sebastian

9,5887 gold badges42 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alex Over a year ago

Thanks, I was aiming for your second block of code. Can you help me verify if that's doing what I intend it to do? Goal: If chapters[mangaId] is empty, add the payload, if mangaIds conflict, overwrite the old data.

Tyler Sebastian Over a year ago

you are correct. { manga2: "manga1", ...{ manga2: "manga2" } } -> { manga2: "manga2" }

Collectives™ on Stack Overflow

Spread operator error with React and Redux

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related