reactでスプレッド演算子（...）を利用するとエラーになる

reactでサンプルソースを見ながら作っているのですが
...の部分でSyntaxErrorになってしまう

ERROR in ./src/reducers/authReducer.js
Module build failed: SyntaxError: Unexpected token (14:8)

  12 |     case SET_CURRENT_USER:
  13 |       return {
> 14 |         ...state,
     |         ^
  15 |         isAuthenticated: !isEmpty(action.payload),
  16 |         user: action.payload,
  17 |       };

全然理解できていなくて泣けてくる

この「...」のことをスプレッド演算子というらしい

スプレッド演算子とは

関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax
より引用

コンソールログにでる内容はどちらも同じになる
なるほどね

reactのコンパイルエラーは下記のサイトだと
qiita.com

babel-preset-stage-2をインストールしろって書いてある・・・
でもwebapckはv3の書き方みたいでそのままだとエラーになった

調べてみると公式にかいてあった
www.npmjs.com

.babelrc
{
  "presets": ["stage-2"]
}

.babelrcに追加したらコンパイルが通るようになった

機能を作るより環境とかではまっている・・・勉強会だからいいけど業務に使うならもっと勉強しないといけないな

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)