typeScriptでreduxを実装しよう

#### 諸注意
私は、reactを覚えたのはつい最近です。なので、細かい部分はまだ勉強中です。
この記事は、自分用のメモに近いです。
もし、間違っている箇所があったらコメントを書いてもらえた嬉しいです。
# なんでreduxを実装するのか
状態を一括で管理したので実装した
状態を渡すのに頭を悩ませている時間がもったいないから

# 実際に実装するには
reduxは、Action、Reducer、Dispatchがあります。
私のイメージ
・Dispatch：配達員
・Action　：住所を教えてくれる
・Reducer ：データを格納する場所

DispatchがActionで処理のタイプもらい。
Reducerに処理を依頼、データを格納。

以上の3つを実装する必要があります。

# 実装下準備
reduxを実装するのにアプリに格納する場所を作らないといけないので以下を実装します。

```typescript:index.tsx
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import Reducer from './Reducer'
const store = createStore(Reducer)
ReactDOM.render(
  <Provider store={store}>
  　<React.StrictMode>
     <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
```
これでAppタグ内で作成したコンポーネントは、データが同一の場所に格納できるようになりました。

# Actionを実装
ファイル構造
    Action
    　┗index.ts
     
下のコードを実装することで<span style="color: red; ">dispatch</span>が<span style="color: red; ">Reducer</span>に頼む処理がtypeによって決定します

```typescript:index.ts
export const testDataA = () => {
    return {
        type: 'testDataA',
    };
};
export const testDataB = () => {
    return {
        type: 'testDataB',
    };
};
```
# Reducer実装
ファイル構造
    Action
    　┗index.ts
    Reducer
    　┗index.ts
    　┗testDataA.ts
    　┗testDataB.ts
以下がデータ格納場所です。
     
```typescript:index.ts
import { combineReducers } from 'redux'
import A from './testDataA'
import B from './testDataB'

const Reducer = combineReducers({
　　//このDataA、DataBがデータが格納する場所です。
    DataA: A,
    DataB: B,

});

export default Reducer;
```

次にReducer内のDataA: Aの　Aを実装します。
この返り値が実際に格納されます。

```typescript:testDataA.ts
const reData = (state = "初期値", action: { type: string; }) => {
   switch (action.type) {
       case 'testDataA':
          return "変更しました"

      default:
          return state
   }
};
export default reData;
```
DataBもDataA同様に実装します。

# フロントから実装できてるか見る
以上を実装することでreduxを実装できたはずです。
なので、次に確認するのは、<span style="color: red; ">実際にユーザの操作でデータを変更できるか</span>を実装します。

```typescript:App.tsx
import React from 'react';
import './App.css';

import { useSelector, useDispatch } from 'react-redux'
import { testDataA, testDataB } from './Action'

function App() {
  const getData = useSelector((state: any) => state);
  const dispatch = useDispatch();
  console.log(getData);

  return (
    <div className="App">
      <h1>{getData.testDataA}</h1>
      <h1>{getData.testDataB}</h1>
      <button onClick={() => dispatch(testDataA())}>change　testDataA</button>
      <button onClick={() => dispatch(testDataB())}>change　testDataB</button>
      
    </div>
  );
}

export default App;
```
以上でreduxが実装できるはずです。


## 余談１
classで実装しようとする場合、私は以下のようにしています。

```typescript:ファイル名.tsx
上でクラスを実装しています
function mapStateToProps(state: any) {
    return state;
}
function mapDispatchToProps() {
    const dispatch = useDispatch();
    return { dispatch1: () => {dispatch(Action名()); } };
}
export default connect(mapStateToProps, mapDispatchToProps)(クラス名)
```
これで、this.propsにデータが渡されます。
## 余談２
fetchでデータを取得する際は、fetch内でdispatchを行っています。
理由は、目的のデータ以外私は、必要と感じないからです。
引数でdispatchを渡す

```typescript:fetch.ts
    function get_Weather(dispatch: any) {
        fetch("http://localhost:5000/hogehoge")
            .then(data => data.json())
            .then(data => dispatch(Weather(data))
        )
    }
```