【react-redux】私的まとめ

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

react-redux

ReactとReduxをつなぐ架け橋的なもの

Container ComponentとPresentational Component

Container Component

• 責務はReactとReduxの橋渡しのみ
• ここにJSXを書くのは好ましくない

Presentational Component

• 純粋なReactコンポーネント
• 自分以外のコンポーネントに依存しない

以下は公式から

	Presentational Component	Container Component
目的	どう見えるか	どう動くか
Redux	関係ない	関係する
データ取得	props	Reduxのstateをsubscribe
データ変更	propsから取得したCallbackを使う	ReduxのactionsをDispatch
作成方法	手動	react-reduxのconnect()

react-reduxがやっていること

• Provider
• connect

Provider

これを使うと好きなコンポーネントとStoreを紐付けられる

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

storeをMyRootComponentに渡さずProviderに渡している。
MyRootComponentはconnect関数でStoreを受け取る

connect

Storeを提供する

mapStateToProps[state,[pwnProps]]

Storeのstateをコンポーネントのpropsに割り当てる関数を指定
returnしたオブジェクトをPropsで受け取れる

mapDispatchProps(dispatch,[pwnProps])

第1引数のdispatchでコンポーネントからdispatchの概念を隠蔽

ここでdispatchを発行

mergeProps(stateProps,dispatchPtops,ownProps)

上2つを経たPropsをマージしてコンポーネントに渡す。

Todoアプリにreact-reduxを導入

import { connect } from 'react-redux';
import TodoApp from '../components/TodoApp';
import { inputTask, addTask } from '../actions/tasks';

function mapStateToProps({ task, tasks }) {
  return {
    task,
    tasks
  };
}

function mapDispatchToProps(dispatch) {
  return {
    addTask(task) {
      dispatch(addTask(task));
    },
    inputTask(task) {
      dispatch(inputTask(task))
    }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoApp);

引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで
ここでやっていることは以下の2つ

• mapStateToPropsでStoreにあるtaskとtasksというStateをPropsに渡す
• mapDispatchToPropsで該当ActionをDispatchさせる関数をPropsに渡す

これでこのコンポーネントにはPropsとして次の4つが渡される

• task:inputフォームに入力されたタスク
• tasks:タスク配列
• addTask:タスクを追加する関数
• inputTask:タスクを入力する関数

import React from 'react';

export default function TodoApp({ task, tasks, inputTask, addTask }) {
  return (
    <div>
      <input type="text" onChange={(e) => inputTask(e.target.value)} />
      <input type="button" value="add" onClick={() => addTask(task)} />
      <ul>
        {
          tasks.map(function(item, i) {
            return (
              <li key={i}>{item}</li>
            );
          })
        }
      </ul>
    </div>
  );
}

引用：React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで

これだとさっきのコードから整形されたオブジェクトがPropsに渡される
先コードではActionCreate,Dispatchもやっているから、inputTaskとaddtaskを呼び出すだけでいい
これでRedux依存が消えて再利用性も高まったという。。。わかんねぇ

また読み直しか。。

参考

• Presentational ComponentとContainer Component