コードで理解するRedux入門

コードで理解するReact入門 の続き

前回までのコード

state名をgreetings -> usersに変更。
入力したユーザー名をstate.usersに追加するコードを追加

inputに入力した文字列を配列に追加していくシンプルな実装

Reduxのためのディレクトリ構成

src/
  actions/
  components/
  containers/
  reducers/

を追加

index.jsはディレクトリのデフォルトエクスポートファイルになるので、インポートの際ディレクトリのパスを指定するだけでいい。

必要なライブラリをインストール

redux : reactとは独立していて、React以外のAngularやVueなどでも使える。
react-redux : reactとreduxを連携するために必要(Providerコンポーネント, connect関数)

$ yarn add redux react-redux // or npm install --save redux react-redux

Storeの生成

エントリーポイントであるsrc/index.jsでstoreを生成する。
import App from './components/App'じゃなくて、import App from './containers/App'が正しい

Action

stateが決まったら、そのstateに対して考えられるアクションを洗い出す。

ユーザーを追加するアクション

Reducer

reducer : 受けたactionのタイプをもとに、storeに新しいstateを渡す

userに関するreducerに

複数あるreducerをまとめて、それをstore生成時に渡す。
そうするとstoreのstateがreducerごとにツリー構造になる。（シンプルなstateツリーを心がける）
state.reducer名.プロパティで取得できる。

connect関数

Appコンポーネントにstateと関数を渡すためのコンポーネント(ContainerComponent)

Presentational Component

state-lessなAppコンポーネント(Presentational Component)

おまけ

React-dev-tools

Webコンソールからコンポーネント構造や渡っているオブジェクトなどがわかりやすくなる。