React-redux Spread operator in reducer returning error "unexpected token"

Question

I followed Dan Abramov's code at https://github.com/tayiorbeii/egghead.io_redux_course_notes/blob/master/08-Reducer_Composition_with_Arrays.md

I am getting error message "Unexpected token at line 22" referring to the ...todo Didn't think it's to do with Babel presets as ...state is working just fine. When I substitute ...todo with ...state inside the map function, it returns the same error.

///Reducer//
    export default (state=[], action) => {
      switch (action.type) {

        case 'ADD_TODO':
            return [...state,
                {
                 id:action.id,
                 text: action.text,
                 completed:false
                }
            ];

         case 'TOGGLE_TODO':
          return state.map(todo => {
            if (todo.id !== action.id) {
              return todo;
            }

            return {
              ...todo, //returning error
              completed: !todo.completed
            };
          });


        default:
            return state;
      }
     }

My calling code:

it('handles TOGGLE_TODO', () => {
    const initialState = [
        {
        id:0,
         text: 'Learn Redux',
         completed: false
        },
        {
        id:1,
         text: 'Go Shopping',
         completed: false
        }
    ];


    const action = {
        type: 'TOGGLE_TODO',
        id: 1
    }




    const nextstate = reducer(initialState,action)



    expect (nextstate).to.eql([
        {
        id:0,
         text: 'Learn Redux',
         completed: false
        },
        {
        id:1,
         text: 'Go Shopping',
         completed: true
        }
    ])

The spread operator is defined differently for arrays and objects, which is why it works for the ...state and not the ...todos. Do you have a .babelrc file anywhere? You'll need at least stage 2 to use the object spread operator per: https://github.com/sebmarkbage/ecmascript-rest-spread — Ben Hare, Jul 30 '16 at 03:04
I didn't have .babelrc file. I have now created one and I installed and added a "transform-object-rest-spread" plugin in the .babelrc file but then I suddenly started getting error message that import is a reserved word. So then I added ES2015 preset inside the .babelrc itself and now it worked. I thought I already had ES2015 working since ...state worked. Strange... — A Allen, Jul 30 '16 at 03:56

score 8 · Accepted Answer · answered Jul 30 '16 at 03:05

It is about presets, actually.

Array spread is part of ES2015 standard and you use it here

        return [...state,
            {
             id:action.id,
             text: action.text,
             completed:false
            }
        ];

However, here

        return {
          ...todo, //returning error
          completed: !todo.completed
        };

you use object spread which is not part of the standard, but a stage 2 proposal.

You need to enable support of this proposal in Babel: https://babeljs.io/docs/plugins/transform-object-rest-spread/ or desugar it into Object.assign calls (see this part of the proposal)

React-redux Spread operator in reducer returning error "unexpected token"

1 Answers1

Linked