【Redux】

こちらの記事は以下の書籍を参考にアウトプットとして執筆しました。
React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

ReduxとReactと組み合わせる

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

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

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の向上まで

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

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を使ってみる

Providerの使い方

ReactDOM.render(
    <Provider store={store}>
        <MyRootConponent />
    </Provider>,
    document.getElementById('root')
)

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

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

connetc([mapStateToPtops],[mapDispatchToProps],[mapmergeProps],[options])

mapStateToProps

Storeのstateの情報をコンポーネントのPropsに割り当てる
returnするとconnetc先のコンポ-ネオtのPropsとして受け取れる。

mapDispatchToProps

コンポーネントからdispatchの概念を隠すと述べられている。
入門者の私にはこの一言で言われても理解ができない
以下は例

// 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つをマージする

function mergeProps(stateProps, dispatchProps, ownProps) {
    retun Object.assign({}, ownProps, stateProps, dispatchProps)
}

これを介すことでコンポを介さずにstateを引数に受け取れる