Reactと対比しながらReduxを理解する

なるべくPureなReactと対比して書いているので、分かりやすくなってる(といいな。。)
**なおハンズオンではありませんので悪しからず。**

ツッコミどころはたくさんあるかもしれませんが、絞った内容とパターンを抑えて説明していきます。

## まず何ができるの?
Reduxを導入することで何ができるのか、、、

![image.png](https://qiita-image-store.s3.amazonaws.com/0/229570/25be5f0d-bd1d-358a-10c3-6dd816e81db6.png)

まぁお馴染みですが、Propsのバケツリレーがなくなりますね。

実際に自プロジェクトでのReduxを導入したことによって得られたメリットをあげると、次のGifの様になります。

**導入前**
タブを切り替える際に毎回データのフェッチ、ローディングが走る
![6h26r-xpv9q.gif](https://qiita-image-store.s3.amazonaws.com/0/229570/0baccfa9-e10a-d2f7-67fb-d10352df672b.gif)


**導入後**
データをStoreで管理し無駄なデータのフェッチがなくなりローディングが毎回走らなくなった

![tm7jw-o1dqj.gif](https://qiita-image-store.s3.amazonaws.com/0/229570/e977e733-801e-1f2d-f36d-20e0840cf21c.gif)

Gifだとわかりにくいですが、導入前は下部のTabを切り替えるときにAPIへのfetch処理が毎回走ってしまうことでローディングが走っておりUXが悪くなってしまいます。
親のコンポーネントでデータを保持すればもちろんいけますが、複雑性が増したり、何よりナンセンスなのでReduxを導入しました。
これによってよりネイティブアプリに近い挙動を再現できています。

## Reduxの概要

![image.png](https://qiita-image-store.s3.amazonaws.com/0/229570/6dc767d1-045e-42d1-5c59-8135433da2c4.png)

まずReduxに入ると、Fluxが〜とか単一方向に〜とか聞きますが、その辺りは今回は説明しません。
自分は物覚えも悪くそこから入っても最初「?」しか出なかった為です。

下記のReactプロジェクトでのコードを見ながら役割を比較して説明していきます。
なおReduxの細かいコード内容についてはまた今度描きます。

```js:sample.js
class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
    }
    this.fetchData = this.fetchData.bind(this);
  }

  fetchData() {
    axios.get('/fetchData').then((res) => {
      this.setState({
        data: res.data.data,
      });
    })
  }

  render() {
    return (
      <button
        onClick={this.fetchData}
      >
        Fetch Data
      </button>
    );
  }
}
```
#### Store
StoreはStateを一括して保存してくれている貯め場の様な場所だと思ってください。
これは1つのプロジェクトにつき1つしか作りません。
上記のコード内には対応する部分はありません。


#### Reducer
Reducerは初期Stateの宣言、および後述するActionから渡ってきた指令によってSwitch分で分岐しながらStateを変更してくれる存在です。
Reactプロジェクトだと`setState()`をする感覚と同じです。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/229570/4da17244-fa04-660c-373c-200eb94196fe.png)




#### Action
Actionはその名の通り関数を定義するファイルになります。
Reactでの違いと比べるとこんな感じで、`データを取得してきたり、Stateを変更するためのDataの準備をする行動 = Action`といった感覚になります。
公式には「Actionを発行する」とか言いますが、いきなり言われても意味わかりませんよね。。。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/229570/b049ef82-ff6e-fcec-c92a-b9a5e6fd00a4.png)

#### Reactにconnect
ここまで出てきている`Store`、`Reducer`、`action`はReduxが持っているものです。
Reactにとっては全く無関係な状態です。
なのでReactとReduxを繋ぐ為に`react-redux`というライブラリを使います。
下記の実装で見ていきます。

## 実装 & 雛形

少し説明する箇所が多くなりますが、ざっくりと説明していきます。
想定としては、よくある`ページのロード → APIからデータの取得 → データおよびビューの更新`です。

#### 1. storeの定義 

( 1 ) - `createStore()`で`Reduxのstoreを使うよ！`的な宣言をします。中の`combineReducers`はreducerをまとめたオブジェクトを`combineReducers`を使うことによって2つ以上のReducerをまとめてくれています。
`applyMiddleware(thunk) `の部分は、まず`applyMiddleware`はRedux用のサードパーティー製のライブラリを使う際、この中で定義してあげます。有名どころだと[redux-devtools](https://github.com/reduxjs/redux-devtools)など入れることが多いです。
そしてその中で定義している`thunk`ですが、これは本来Reduxでは非同期処理に対応していない為、非同期処理を可能にしてくれるライブラリになります。
非同期処理用のパッケージには

- 今回使っているredux-thunk(https://github.com/reduxjs/redux-thunk)
- redux-saga(https://github.com/redux-saga/redux-saga/blob/master/README_ja.md)
- redux-observable(https://github.com/redux-observable/redux-observable)


などがあり、各々メリット、デメリットがあります。
詳細は割愛しますが、今回は一番使いやすい`redux-thunk`を使用します。

( 2 ) - 上記で作成した`store`を`Provider`内で呼び出します。


```index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import App from './User/pages/App';
import reducers from './reducers/';

const store = createStore(combineReducers(reducers), applyMiddleware(thunk)); // (1)

ReactDOM.render(
  <Provider store={store}> // (2)
    <BrowserRouter>
      <Route path="/" component={App} />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root'),
);

```

#### 2. reducerでinitialStateの定義

初期ステートを定義します。
上記で説明したReactでいう`this.state={}`の部分のようなものだと思っていてください。
最初はdefault argumentを与え、随時初期ステートを上書いて更新していく形になります。

```js:reducers/post.js
const initState = {
  data: [],
};

export default (state = initState, action) => {
  const { type, payload } = action;
  switch (type) {
    default:
      return state;
  }
}
```
なお先ほどIndexで`combineReducers`の話がありましたが、2つ以上のReducerを定義する際には以下のようにオブジェクト型にラップしてエクスポートします。

```js:reducers/index.js
import post from './post';
import sample from './sample';

export default {
  post,
  sample,
};
```

#### 3. Componentでの呼び出し

ここがReduxとReactの繋がる大きなポイントになります。
( 1 ) - まずReactの際はただコンポーネントをエクスポートするだけでしたが、ReactとReduxを繋げる際は`connect`関数を使います。慣れてない方だと見慣れない構文ですが`connect()(<Component />)`とし括弧の２つ目にコンポーネントを記載します。
これはHOCs(ハイオーダーコンポーネント)、高階関数といいます。今回は割愛します。

(2) - そして括弧の１つ目の`mapStateToProps`ですが、ここではStoreにある値を全て参照できます。Reducerで定義して、Storeに保存されている値を全て参照できるので、この中から必要なReducerの値だけを取ってきます。
* mapDispatchToPropsを定義するやり方もありますが、今回は定義しません。

(3) - connectしてきた値はPropsで受け取ることができます。

```js:Post.js
import React from 'react';
import { connect } from 'react-redux';

class Sample extends React.Component {
  render() {
    return (
      <div>
        {this.props.data.map(data => data.name)} // (3)
      </div>
    );
  }
}

const mapStateToProps = ({ post }) => post; // (2)

export default connect(mapStateToProps)(Sample) // (1)
```

#### 4. actionの定義
概念編で見た通り関数を定義します。
その際`dispatch`を受け取って`dispatch`内で`type`、`payload`定義します。
`type`にはReducerで分岐させるためのTypeを渡します。
`payload`には実際のデータを入れます。(実際にはpayloadと言う名前でなくても良いが、payloadが推奨されている)

```js:actions/post.js

import axios from 'axios';

export const FETCH_DATA = 'FETCH_DATA'; // (1)

export const fetchData = () => (dispatch) => {
  axios.get('/fetchData').then((res) => {
    dispatch({
      type: FETCH_DATA,
      payload: res.data.data,
    });
  });
};

```

#### 5. reducerにてstateの更新

先ほどactionにてエクスポートしたtypeをインポートし、caseで分岐します。
その際にstateをpayloadのデータで上書きます。

```js:reducers/post.js
+ import { FETCH_DATA } from '../actions/post';

const initState = {
  data: [],
};

export default (state = initState, action) => {
  const { type, payload } = action;
  switch (type) {
+    case FETCH_DATA:
+      return {
+        ...state,
+        data: payload
+      };
    default:
      return state;
  }
}
```

#### 6. Componentにてactionsの呼び出し

あとは、actionで定義した関数を呼んであげるだけです。
今回のやり方だと、`connect`すると`dispatch`のPropsが渡ってきますので、`dispatch`でラップした上で関数を呼んであげましょう。

```js:Post.js

import React from 'react';
import { connect } from 'react-redux';
+ import { fetchData } from '../actions/post';

class Sample extends React.Component {
+  componentDidMount() {
+    this.props.dispatch(fetchData());
+  }
  render() {
    return (
      <div>
        {this.props.data.map(data => data.name)}
      </div>
    );
  }
}

const mapStateToProps = ({ post }) => post;

export default connect(mapStateToProps)(Sample)

```


## まとめ
今回の内容は本に載ってる内容だったりとは少し違う書き方ですが、個人的には一番書きやすいと思った書き方です。

Reduxは複雑すぎると言う声が多いですが、自分なりの雛形を覚えてそこから発展させていけばそんなに難しく感じずに進められるのかなと思いました。(自分はかなり苦しんだ。。。。)

PureなReactがContext APIだったり、今回は関係ないけどHooksやSuspenceだったり充実してきているので、なん年後かには使われなくなっているんですかね。。。

まぁ、それにしてもReduxは書いてて楽しいです