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

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

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

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

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

userに関するreducerに

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

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

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

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