React-Reduxのdispatchのアロー関数の書き方が良く分からなかったので調べました

## はじめに

アロー関数が良く分からない・・・

って方は結構いらっしゃるんじゃないでしょうか？

私がその１人です。

今回は、react-reduxを使ってる際に「ん？」となった箇所について調べてみました。




## ん？　となったところ
react-reduxのmapDispatchToPropsにて、
dispatch関数の引数に指定した関数の中で
dispatch関数を使う書き方

```javascript:MyComponent.js
import { incrementNumber, decrementNumber, resetNumber } from '../MyActions'

//〜中略〜

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch(incrementNumber())
  }
}
```
```javascript:MyAction.js

request = () => ({
  type: "REQUEST"
})

requestSuccess = (items) => ({
  type: "REQUEST_SUCCESS"
  items: items
})

export const incrementNumber = () => (dispatch) => {
  dispatch(request())

  request
      .get('http://example.com/someuri')
      .end(function(err, res) {
        return dispatch(requestSuccess(res.body.items));
      });
)
```

<img width="400" alt="スクリーンショット 2019-06-26 10.51.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/e3dc242b-5851-a19c-3ca4-9e5f61f3851f.png">

dispatch(incrementNumber())
って書いてあるのに、incrementNumberの方は

```
export const incrementNumber = () => (dispatch) => {
```

って書いてありますよね。このdispatchってどこから来たんでしょ？
ていうか

```
 () => (dispatch) => 
```
この書き方が「ん？」ってなりませんか？（私だけ？）

というわけで、mapDispatchToPropsとアロー関数とdispatchの関係について研究してみました。

- - -

**dispatchに関数じゃなくてデータを直接いれる書き方**

```javascript
const mapDispatchToProps = dispatch => {
  return {
    // dispatching plain actions
    increment: () => dispatch({ type: 'INCREMENT' }),
    decrement: () => dispatch({ type: 'DECREMENT' }),
    reset: () => dispatch({ type: 'RESET' })
  }
}
```
dispatch関数にアクションデータを放り込む形式。
このデータがreducerに届くんだなと直感的で分かりやすいです。

- - -

**dipatch関数にアクション関数の結果をいれる書き方**

```javascript:MyComponent.js
import { incrementNumber, decrementNumber, resetNumber } from '../MyActions'

//〜中略〜

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch(incrementNumber()),
    decrement: () => dispatch(decrementNumber()),
    reset: () => dispatch(resetNumber())
  }
}
```
```javascript:MyAction.js
export const incrementNumber = () => ({
  type: 'INCREMENT'
})

export const decrementNumber = () => ({
  type: 'DECREMENT'
})

export const resetNumber = () => ({
  type: 'RESET'
})
```
[reduxのチュートリアルのexample](https://redux.js.org/basics/example)に記載されている形。
dispatch関数の引数に放り込むアクションデータを作成する関数群を別ファイルに分ける方法。

ここもまだ直感的に理解できる形かなと思います。

- - -

**今回の「ん？」な書き方**

```javascript:MyComponent.js
import { incrementNumber, decrementNumber, resetNumber } from '../MyActions'

//〜中略〜

const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch(incrementNumber()),
    decrement: () => dispatch(decrementNumber()),
    reset: () => dispatch(resetNumber())
  }
}
```
```javascript:MyAction.js

request = () => ({
  type: "REQUEST"
})

requestSuccess = (items) => ({
  type: "REQUEST_SUCCESS"
  items: items
})

export const incrementNumber = () => (dispatch) => {
  dispatch(request())

  request
      .get('http://example.com/someuri')
      .end(function(err, res) {
        return dispatch(requestSuccess(res.body.items));
      });
)
```

これです。アクションの際に非同期通信などを行う方法を探すとこのような形をよく目にします。
mapDispatchToPropsの方は書き方を変えてないないのに、
アクションの方でdispatch関数が呼べるようになってます。

<img width="400" alt="スクリーンショット 2019-06-26 10.51.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/e3dc242b-5851-a19c-3ca4-9e5f61f3851f.png">

## アロー関数の書き方のおさらい

「引数で受け取った値に５を掛けて返す関数」を例にして書き方をおさらいします。

### アロー関数じゃない書き方

```javascript:
  kansuu = function(hikisuu) {
    return hikisuu * 5
  }
```

### アロー関数

```javascript:
  kansuu = (hikisuu) => {
    return hikisuu * 5
  }
```

さらに、returnしかしない関数では中括弧とreturnが省略した書き方ができます。

```javascript:
  kansuu = (hikisuu) => (
    hikisuu * 5
  )
```

さらに、１行で描くと()も省略できます。

```javascript:
  kansuu = (hikisuu) => hikisuu * 5
```
すっきりしたコードにはなりますが、慣れてないと「ん？」ってなりますよね。（私だけでしょうか……)

### 関数の中で関数を作る場合

```javascript:
  kansuu = (hikisuu) => {
    kakeru5 =  (val) => {
      return val * 5
    }
    result = kakeru5(hikisu)
    return result
  }
```
関数の中で「引数に５を掛けて返す関数」を作って、それを使って値を返してます

- これをスッキリさせると、こうなります。

```javascript:
  kansuu = (hikisuu) => {
    return (val) => {
      return val * 5
    }
  }
```

- さきほどの１行バージョンで描くと、

```javascript:
  kansuu = (hikisuu) => {
    return (val) => val * 5
  }
```

- さらにスッキリさせると、

```javascript:
  kansuu = (hikisuu) => (val) => val * 5
```

<img width="400" alt="なるほど！" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/100226/6917b6ef-65d3-f502-f6c0-b926e371f887.png">

**謎だった形になりました！**

## なるほど！

```javascript:MyAction.js
export const incrementNumber = () => (dispatch) => {
```

incrementNumberという変数にセットしている関数は
*「dispatchを引数として受け取る関数を返す関数」*ってことですね。

```javascript:MyComponent.js
const mapDispatchToProps = dispatch => {
  return {
    increment: () => dispatch(incrementNumber())
  }
}
```

MyComponentの方でこう書いてあるので、
dispatch関数の引数に*「dispatchを引数として受け取る関数を返す関数」*を渡してるんですね。

## 推測


**dispatch関数は引数で受け取った関数を呼び出す際に引数に自身をセットしてくれている**

ってことだと思います。

## 宿題

```javascript:MyComponent.js
const mapDispatchToProps = dispatch => {
  return {
    increment: () => incrementNumber(dispatch)
  }
}
```

って書いた方が分かりやすくない？　って思いますが、
おそらく**this**に関わる何かがあるのかなと予想しています。

次はこの謎に挑戦しようと思います。

ご静聴ありがとうございました:relaxed: