はじめに
React+React-Reduxを用いてWebシステムを開発しているの際に引っかかった所やよく分からなかった箇所の復習用にこのような記事を投稿しようと考えました。
Reduxってなに？
簡単に説明すると、ReduxとはUIの状態を簡単に管理できるフレームワークです。
このReduxをReactと組み合わせて使う場合、UIの状態を専用の場所(ストア)で管理し、Reactはそれを表示するだけの役割を担っています。
フロー全体図
- 画面から入力されたInputをもとにAction Creatorからactionがdispatchされる
- Reducerがdispatchに対してStore内のstateを更新する
- 更新されたstateを参照する
Store
コンポーネントの状態(state)を集約している場所
ActionとActionCreator
Actionとは、store内のstateを変更するためのオブジェクトになります。
Actionを発行することでReducerが現在のstateとactionを元に新しいstateを作成します。
Actionを追加するごとにconnectするわけにはいかないので、Actionを生成する関数を定義する必要があります。これをActionCreatorと呼びます。
Reducer
Actionが発行された時、このReducerが反応します。Reducerは送られてきたActionと、元のstateをもとに新しいstateを返す関数です。
connect
Reactのコンポーネント単体では、Reduxを利用することはできません。Reduxを使えるようにするためにはReact-Reduxのconnectという関数を用いて下記のように書きます。
sample.js
1 export default connect(
2 (state) => (state.myStore),
3 (dispatch) => bindActionCreators({ ...myStore.actionCreators }, dispatch)
4 )(MyComponet);
- 2行目
- storeのstateをpropsとしてコンポーネントに渡す。
- 3行目
- 発行したactionを指定する。
- 4行目
- どのコンポーネントにstoreを接続するのか指定する。
mapStateToPropsとmapDispatchToProps
- mapStateToPropsは、コンポーネントに渡したいstateを入れることができます。
- mapDispatchToPropsは、actionをstoreにdispatchしてくれる関数です。
最後に
ここまで自分の理解できている範疇で書いてみましたが、まだまだ不明瞭な点が多いのが正直なところです。
さらに勉強して知識を蓄えていきたいと思います。