はリアクト - Reduxの減速でスプレッドオペレータがエラー「予期しないトークン」

Question

を返す私はhttps://github.com/tayiorbeii/egghead.io_redux_course_notes/blob/master/08-Reducer_Composition_with_Arrays.md

でダン・アブラモフ監督のコードを踏襲し、私が参照して、エラーメッセージ「22行で予期しないトークン」を取得しています... TODO ませんでしたそれはバベルのプリセットと関係があると思います...州はうまくいきます。 map関数の中でtodoを... stateに置き換えると、同じエラーが返されます。

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

私の呼び出しコード：

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 
     } 
    ]) 

Answer 1

それは実際には、プリセットについてです。

アレイスプレッドはES2015標準の一部であり、あなたはここに

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

、しかしここ

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

それを使用しますが、標準の一部ではなく、a stage 2 proposalないobject spreadを使用しています。

あなたはバベルにこの提案のサポートを有効にする必要があります。https://babeljs.io/docs/plugins/transform-object-rest-spread/をかObject.assignコール（this part of the proposalを参照）