Reactのコード読解

Question

前提・実現したいこと

コード読解

発生している問題

以下（React）の、
dispatch=>({})の構造が分かりません。

該当のソースコード

const mapDispatchToProps = dispatch => ({
  onTodoClick(id) {
    dispatch(toggleTodo(id));
  }
});

試したこと

アロー関数を調べましたが、
アロー関数であれば、（）=>{}となるはずで、
()=>({})となるのは、オブジェクトを返すときだけなはずです。
なぜ、上記のようなdispatch=>({})となるのでしょうか。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

アロー関数です。アロー関数では渡す引数が1つの場合、引数を囲むカッコは省略できることになっていますので、次の各例はいずれも同じ動きをします。

const mapDispatchToProps = function(dispatch) {
  return {
    onTodoClick(id) {
      dispatch(toggleTodo(id));
    }
  };
});

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick(id) {
      dispatch(toggleTodo(id));
    }
  };
});

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick(id) {
      dispatch(toggleTodo(id));
    }
  };
});

onTodoClick(id) { ...} をメンバーとして持つオブジェクトを返しています。

アロー関数では、return文も省略して書くことができます。たとえば、次の2例は同じ動きをします。

['Alice', 'Bob', 'Charlie'].filter(val => {
  return val.indexOf('i') !== -1
});
// -> ['Alice', 'Charlie']

['Alice', 'Bob', 'Charlie'].filter(val =>  val.indexOf('i') !== -1);
// -> ['Alice', 'Charlie']

同様にオブジェクトを返すときにもreturnを省略して書きたいと考えた場合、
mapDispatchToProps = dispatch => {onTodoClick(id) { ... }} となってしまいますね。
これでは、 dispatch => {} の波括弧が、 function() {} の波括弧なのかオブジェクトリテラルの波括弧なのかわかりません。
そこで、 dispatch => ({...}) の形にしてやることで、オブジェクト {...} を返すということを明確にしています。

Comments

[Akira1206]

ありがとうございます！
解決できました！