しゃべぶろ

気になった技術の備忘録を残します。

【React】React + Redux 触ってみた

概要

Reactを学ぶべく、こちらの参考書を使って学習したので、
復習を兼ねてReactとReduxについて学んだことを記載する。

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)

Reactとは?

  • 画面表示を担当するフレームワークのこと。
  • 画面をコンポーネント(=部品)単位に分けて開発する。
  • コンポーントは基本的にJSXで記述される。
    • JSX(Javascript eXtension)はJS内でHTML構文を使えるようにしたもの。
    • 当然そのままではブラウザで表示できないので、トランスパイラというツールを使って変換される。
  • VDOM(Virtual DOM)を用いて差分のみ画面表示するので速い(らしい。
    • 今回学習した中では、VDOMの良さはよく分からなかった。

Reduxとは?

  • アプリケーションの状態を管理してくれるライブラリのこと。
  • 状態を更新をさせるにあはイベントを発生させる必要がある。
  • イベントを発生させる以外に更新方法がないので、シンプルな更新フローとなる。
  • FluxというFacebook公式ライブラリもあるため、Reduxを無理に使う必要はないかも。
    • FluxとReduxの違いはよく分からなかった。

React + Redux

表示を担当するReactと状態を管理するReduxを組み合わせる。
ここは初見殺しかと思うぐらい訳が分からなかった。
特にReactをReduxに接続する部分を理解するのに時間が掛かった。

概念

概要

自分の理解はこんな感じです。

Reactが表示している画面をユーザーが操作し、その時に発生したイベントでReduxが状態を更新、Reactは更新された状態を見て画面表示を変更する。

個人的には以下2つのポイントを理解すれば良いかと思う。

  • ReactはどのようにReduxにイベントを渡しているか。
  • Reactは更新した状態をどのように参照しているのか?


上記を実現するためにはreact-reduxというライブラリが必要になってくる。

登場人物
  • Action
    • Redux側の人物
    • 上で説明していたイベントに該当する。
    • ReactはこのActionを発行する。
  • Reducer
    • Redux側の人物
    • Actionを元に状態を更新する。
  • Store
    • Redux側の人物
    • 状態を管理している、Reudcerのみ更新可能。
  • ConnectedComponent
    • ReactとReduxを繋げる人物
    • react-reduxライブラリのconnect関数を用いて繋げる。
概念図

図で説明してみる、こちらの記事から概念図を拝借する。
qiita.com

f:id:shabe:20190106202722p:plain

ReactはどのようにReduxにイベントを渡しているか。

  • これはConnectedComponentがRedux側に渡している。
    • ConnectedComponentはdispatchという特殊な関数を保持している。
    • dispatchの引数にActionを与えることで、Reducerを呼び出すことが出来る。
  • その後Reducerでは渡ってきた引数を元に、Storeの状態を更新していく。
    • この時に前の状態をみて差分更新するのが大事。
    • 差分更新することで、React側は更新された箇所のみ描画をすることが出来る。

Reactは更新した状態をどのように参照しているのか?

  • mapStateToPropsという関数を使うことで、React側に値を渡している。
    • Store側の状態(State)をReact側の変数(Props)にマッピングすることが出来る。
    • この関数はConnectedComponent内で定義される。

感想

基本概念については大分理解してきた。
特に今回使った参考書の10章目がかなり理解を促進してくれた。

あとはComponentやStoreの設計方法などを知っていきたい。
まぁ、実践あるのみかなー、実務で使いたいなー!