react 勉強メモ 5日目（react/redux: ActionsとReducers）

Actionsの役割

アプリから受け取ったデータをReducersに渡す

Actionでは純粋なデータを渡すのみで、どのstateをどう変えるかはReducersが決める。そのためActionはプレーンなオブジェクトを返す。

Actionsの書き方

1. Action type を定義してexport

2. typeとpayloadを記述

3. プレーンなobjectを返す

export const SIGN_IN = "SIGN_IN";
export const Action = userState => {
 return {
   type: "SIGN_IN",
   payload: {
     isSignIn: true,
     name: userState.name
   }
 };
};

Reducersの役割

Actionsから受け取ったデータを元にStoreのstateをどう変更するかを決める。Storeを管理する役割。

Reducersの書き方

// ActionsとinitialStateをimport

export const UserReducer = (state = initialState.state, action) => {
  switch (action_type) {
     case Actions.SIGN_IN:
       return {
         ...state,
         ...action.payload
       };
     default:
       return state;
   }
 };

(state = initialState.state, action) は特にstateがない場合初期状態を渡す

`...state` のようにスプレッド構文で展開してあげることでいちいち中身を一つづつ指定する必要もないし、後からプロパティ追加するのも楽。

また、initialStateに書かれているフィールドも全部展開されて呼ばれたactionで存在しているフィールドについては上書きされる（だからinitialStateには存在しうる全てのフィールドを書く必要がある）

initial定義されてるが呼ばれたActionには無いフィールドもあり得るのでスプレッドにしないと、指定されていないフィールドが消えてしまう。

StoreとReducersの関連付け

reduxのCreateStoreメソッドをreturn

combineReducersでstateを生成

Provider

- propsにstoreをcreateStore()で作った渡すことで、ラップしたコンポーネントにstoreの情報を渡す

- Reactコンポーネント内でconnect関数（reactとreduxの接続関数）を使えるようにする

（おまけ）

全然関係ないけどクロージャーの説明で親切なやつあったので

http://dqn.sakusakutto.jp/2009/01/javascript_4.html