Reduxのactionにおける記法について

Question

Reduxを勉強していると、actionのファイルに下記のような記法が出てくることがあります。

import uuid from 'uuid';
export const addTask = (
	{
      contents = '',
      is_finished = false
	} = {}
) => ({
	type: 'ADD_TASK',
	payload: {
      id: uuid(),
      contents,
      is_finished
	}
})

この記法の意味がよくわかりません・。
自分としては、最初の

{
      contents = '',
      is_finished = false
} = {}

はactionに含まれるvalueの初期値であり、
その下段の

) => ({
	type: 'ADD_TASK',
	payload: {
      id: uuid(),
      contents,
      is_finished
	}

が実際にreducerに飛ばす、パラメータの形だと考えています。

それで正しいでしょうか。

また、

{
      contents = '',
      is_finished = false
} = {}

の中にある

{} = {}

とはなんでしょうか。

以上二点です。

何卒よろしくお願いします。

Answer 1

これはアロー関数という記法だと思います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions#Basic_syntax

質問者さまのコードの[型]として
(引数)=>(返り値)というのがまず前提にあると考えます。

そして引数にあたる部分が

    {
      contents = '',
      is_finished = false
    } = {}

だと思います。
これは一見ややこしいですが最初の{}は辞書型のオブジェクトです。
そこにデフォルト引数として{}という空の辞書を入れているのだと思います。
(つまりaddTaskに引数を入れなかったら、空の辞書が引数となる。)<-一点目の問いの答え

↓デフォルト引数について

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Default_parameters

次に返り値についてです。

これは辞書型のオブジェクトを返しています。

{
    type: 'ADD_TASK',
    payload: {
      id: uuid(),
      contents,
      is_finished
    }

reducerに飛ばす、パラメータの形だと考えています。

その考えでいいでしょう。<-二点目の問いの答え

このオブジェクトを返すアロー関数をaddTaskに入れることによりADD_TASKというtypeを持つActionを作ることができるということです。

Comments

[tomoharu]

返信が遅れ申し訳ございません。ご回答ありがとうございます。一つだけわからなかったのですが、addtaskに引数を入れない場合は、contentsに空の文字列、is_finishedのfalseが初期値としてはいると認識していました。。。そうではなく、引数を入れない場合、空の辞書型オブジェクトが入ると認識しました。そうなると、contents="　"やis_finished = falseと定義している理由は何かあるのでしょうか。重ね重ね申し訳ありませんがよろしくお願いsます。

[hood]

私もそこが謎でした...
思ったのは空の辞書型を引数にとる場合、どちらも返り値がundifinedになるから、それをややこしいやりかたで明示しているのかな？と。
でもだったらデフォルトでcontents="　"やis_finished = falseをやればだけだとも思います。
これは推測でしかありませんので、間違っているかもしれません。実力不足で申し訳ありません。

そこの部分だけ改めて質問するというのもいいかもしれませんね。

[tomoharu]

承知しました。ありがとうございます。