react構文について教えてください。

Question

以下のプログラムについて
getStateの取得結果をtodosに格納している認識ですが
正しいでしょうか？getState()が右下にあって違和感があります。
普通同じ行（＝の右側）の変数に格納しますよね
｛｝や⇒があってよくわかりません。

export function adUniqueTodo(title){
  return (dispatch , getState) => {
     const {
       todo:{ 
          todos,
       },
     } = getState();
  }
}

Comments

[hoshi-takanori]

adUniqueTodo は関数を返す関数で、getState の結果を分割代入してますが、その結果も、引数 title や dispatch も使っtてないので、意味不明ですね…。

Answer 1

以下のように書くとちょっと解りやすくなるでしょうか。

=> アローによる関数を functionにして、uniqueTodoFunc という関数名にしてみました。
次が、getState()が返すObject を変数で受け取る処理ですが、
どうも todosの部分だけを後で使いたいから、このような入れ子のデータで受けているようです。

見た目に慣れないと一見わからないですが、特に難しいことはしてなさそうです。慣れるしかないです。

export function addUniqueTodo(title) {
  const uniqueTodoFunc = function(dispatch, getState) {
    const {todo:{todos}} = getState();
    // todos を使って重複を削除する処理が続く
  }

  return uniqueTodoFunc; // 関数を返す
}

Comments

[pokemonta]

関数uniqueTodoFunc を呼んでおいて
また、関数を返しているんですね？（=>の右側以降）
しかも内部では、getState()から値をtodosに格納済みのもの
なんか不思議ですね。なんでこんなややこしいことするのか。。。

[hide5stm]

ここではuniqueTodoFuncは呼ばれていません。作っているだけです。
addUniqueTodo()の呼び出し元で、uniqueTodoFuncは呼ばれます。
JavaScriptでは関数のreturn値として関数を返す。ということがC/C++/Java/Pythonといった他の
言語に比べると頻繁に行なわれる傾向があります。
これは、ブラウザ上で動くという制約から、非同期呼び出しが多用されるため、callback関数が必然的に多くなる。というような理由があるはずで、単なる趣味ではないと思うので、新しいパダライムと思って慣れるしかないです。

[pokemonta]

〉関数のreturn値として関数を返す。
勉強なりました