6

Dan Abramov によって投稿された Redux オンライン チュートリアルを理解しようとしています。現在、私は次のサンプルを使用しています。

配列を使用したレデューサー構成

上記のサンプルに続く私の練習コードは次のとおりです。

// Individual TODO Reducer
const todoReducer = (state, action) => {
    switch(action.type) {
    case 'ADD_TODO':
        return {
            id: action.id,
            text: action.text,
            completed: false
          };
    case 'TOGGLE_TODO':
        if (state.id != action.id) return state;

      // This not working
      /*
      return {
        ...state,
        completed: !state.completed
      };
      */

      //This works
      var newState = {id: state.id, text: state.text, completed: !state.completed};
      return newState;
    default:
        return state;
  }
};

//TODOS Reducer
const todos = (state = [], action) => {
        switch(action.type) {
        case 'ADD_TODO':
       return [
          ...state,
          todoReducer(null, action)
       ];
       case 'TOGGLE_TODO':
        return state.map(t => todoReducer(t, action));
      default:
        return state;
    }
};

//Test 1
const testAddTodo = () => {
  const stateBefore = [];

  const action = {
      type: 'ADD_TODO',
      id: 0,
      text: 'Learn Redux'
  };

  const stateAfter = [{
     id: 0,
     text: "Learn Redux",
     completed: false
  }];

  //Freeze
  deepFreeze(stateBefore);
  deepFreeze(action);

  // Test
  expect(
     todos(stateBefore, action)
  ).toEqual(stateAfter);
};

//Test 2
const testToggleTodo = () => {
  const stateBefore = [{id: 0,
     text: "Learn Redux",
     completed: false
  }, {
    id: 1,
    text: "Go Shopping",
    completed: false
  }];

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

  const stateAfter = [{
     id: 0,
     text: "Learn Redux",
     completed: false
  }, {
    id: 1,
    text: "Go Shopping",
    completed: true
  }];

  //Freeze
  deepFreeze(stateBefore);
  deepFreeze(action);

  // Expect
  expect(
     todos(stateBefore, action)
  ).toEqual(stateAfter);
};

testAddTodo();
testToggleTodo();
console.log("All tests passed");

問題は、todoReducer 関数内で、次の構文が機能しないことです。

return {
        ...state,
        completed: !state.completed
      };

Firefox バージョン 44.0 を使用していますが、コンソールに次のエラーが表示されます。

Invalid property id

現在のバージョンの Firefox は Spread オペレーターをサポートしている必要があると思います。とにかくそうでない場合、この構文をサポートするためにスタンドアロンのポリフィルを追加する方法はありますか?

ここにもJSFiddleがあります

4

3 に答える 3

8

現在のところ、オブジェクト スプレッド構文はほとんどのブラウザでサポートされていません。ES7 (別名 ES2016) での追加が提案されています。私が知る限り、関数呼び出しではなく新しい構文を使用するため、ポリフィルする方法はありません。

それまでの間、2 つの選択肢があります。

1)Object.assign次のように、オブジェクトの更新バージョンを作成するために使用します。

Object.assign({}, state, {
  completed: !state.completed
});

これもほとんどのブラウザーでポリフィルする必要がありますが、良い例は MDN で入手できます。または、 lodash のようなサードパーティ ライブラリのバージョンを使用することもできます。

2) Babelなどのトランスパイル ツールを使用すると、新しい構文でコードを記述し、すべてのブラウザーで動作するバージョンに変換できます。

于 2016-02-10T09:27:13.893 に答える
1

構文をポリフィルすることはできません。現在のブラウザーで実行したい場合は、babel などを使用して古いバージョンの JavaScript にコンパイルする必要があります。

https://babeljs.io/

于 2016-02-10T09:27:21.977 に答える