【Redux】

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

#ReduxとReactと組み合わせる

タスク入力用のActionを作ってReduerもそれを処理できるように変更する

更にReactコンポーネントを用意

```javascript
function TodoApp({ store }) {
  const { task, tasks } = store.getState()
  return (<div >
    <input type="text" onChange={(e) => store.dispatch(inputTask(e.target.value))} />
    <input type="button" value="add" onClick={() => store.dispatch(addTask(e.target.value))} />
    <ul > {
      tasks.map(function (item, i) {
        return (<li key={i} > {item} </li>)
      })
    }
    </ul>
  </div>
  )
}
```
引用：[React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで](https://www.amazon.co.jp/React%E5%85%A5%E9%96%80-React%E3%83%BBRedux%E3%81%AE%E5%B0%8E%E5%85%A5%E3%81%8B%E3%82%89%E3%82%B5%E3%83%BC%E3%83%90%E3%82%B5%E3%82%A4%E3%83%89%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E3%81%AB%E3%82%88%E3%82%8BUX%E3%81%AE%E5%90%91%E4%B8%8A%E3%81%BE%E3%81%A7-%E7%A9%B4%E4%BA%95%E5%AE%8F%E5%B9%B8-ebook/dp/B078XDLL2J/ref=tmm_kin_swatch_0?_encoding=UTF8&qid=&sr=)

このコンポーネントで以下の操作をしている

1. stateの状態を分割で取得。
2. 1つ目のインプットでは文字入力欄を設置してその値が変更されるたびに値を送信している。2つのインプットはボタンでクリックしたらその値をaddTadkに送信してタスクが追加される
3. その後今の状態のタスクを表示する


後は状態変化のタイミングで描画するsubscribeをうまく使えばうまく描画できる

それにしてもこの書籍は打ち間違いと入力不足が多い
サンプルコードはほんとに当てにならない

#react-redux
reduxが公式で足しているReact連携ツール
##Comtainer ComponentとPresentational Component
ReactはViewを扱い、ReduxのStoreやActionと疎結合がしているのが望ましい
|用語||
|---|---|
|Comtainer Component|ReduxのStoreやActionを受け取ってReactのPropsとして渡す役割。ReactとReduxの橋渡しのみに責任がある|
|Presentational Component|Reduxが依存しない純粋なReactコンポーネント|
##react-reduxがやっていること

2つの機能がある

- Provider
- connect

##Provider store
>ReactコンポーネントからActionをdispatchするにはStoreが必要だが、コンポーネントが大量かつ階層も深くなってくると、最上位からStoreを行き渡らせるのは大変になってくる。そこでProviderの仕組みを使って、connect関数で任意のコンポーネントとStoreの紐付けを行う。
引用：[react-reduxを使ってみる](https://hawaiiantime.hatenablog.jp/entry/2019/03/17/234258)

```javascript:Providerの使い方
ReactDOM.render(
    <Provider store={store}>
        <MyRootConponent />
    </Provider>,
    document.getElementById('root')
)
```

最上位コンポーネントをPrividerでラップしpropsにStoreを与え、Reactのcontext経由でStoreを保持する


sutoreをProviderに渡している
Providerの子コンポーネントとなったものはconnectでStoreの状態を取得する

```react
connetc([mapStateToPtops],[mapDispatchToProps],[mapmergeProps],[options])
```
###mapStateToProps 
Storeのstateの情報をコンポーネントのPropsに割り当てる
returnするとconnetc先のコンポ-ネオtのPropsとして受け取れる。
###mapDispatchToProps
コンポーネントからdispatchの概念を隠すと述べられている。
入門者の私にはこの一言で言われても理解ができない
以下は例

```javascript
// ActionCreator
const addTask = (task) => ({
    type: 'add',
    payload: { task }
})

function mapDispatchToProps(dispatch) {
    return {
        addTask(task) {
            dispatch(addTask(task))
        }
    }
}
```
引数にstoreのdispatchもち、これでActionを発行

###mergeProps
上記2つの関数のPropsと親から帰ってきたownPropsをマージしてコンポに渡す

デフォでは3つをマージする

```javascript
function mergeProps(stateProps, dispatchProps, ownProps) {
    retun Object.assign({}, ownProps, stateProps, dispatchProps)
}
```
これを介すことでコンポを介さずにstateを引数に受け取れる