Redux の概要

https://codesandbox.io/s/kk2vx81z13

React の場合

state(this.state, this.setState()) が state 管理の主役だった。

Redux の場合

• Redux は state の管理(保持と変更)を担当する。
• Redux の store がそれを主に担当する。
• store は 「一つ前の state, dispatch された action , reducer 」を用いて、新しい state を生成し、これで自分自身の state を上書きすることで state を更新する。
• redux で管理した state を変更するためには、かならず aciton を dispatch することで行うこと。(this.setState()は使わない)
• reducer は 「一つ前の state, dispatch された action 」を元に新しい state を生成するための 「関数」 。
• Redux が生成した store を React で使用するためには、store を React Component に Connect する。（Redux 単体は、単に state 管理のためのアプリケーションなので、React と結び付ける作業は react-redux でおこなう）

store

Redux の中心的な存在です。action を受け取ってその内容を元に、「一つ前の state」 に対して reducer で変更を加えた「新しい state」を生成し、それによって state を更新します。

// redux から　createStore を読み込む
import { createStore } from "redux";

// これを使って store を作る
// その際に reducer が必要
const store = createStore(reducer);

reducer

state を変更するために使用される関数です。 一つ前の state と、受け取った action の内容を元に、新しい state を作って return する関数です。action.type で分岐して、返す内容を決めています。

// 一つ前の state と、受け取った action の内容を元に
// 新しい state を作って return する関数
const reducer = (state = 0, action) => {
  switch (action.type) {
    case "DO_SOMETHING":
      return state + 1;
    default:
      return state;
  }
};

action と dispatch

action は単なるオブジェクトです。dispatch によって発行されます。 dispatch で action を発行すると、store に送られて、state の更新のために使われます。reducer が受け取って、action.type によって分岐していましたよね。

// action の dispatch
store.dispatch({
  type: "DO_SOMETHING",
  payload: "something"
});

// action はこの部分
// type は必須だが、
// 他にも任意のプロパティ(ここでは payload)を追加してもよい
{
  type: "DO_SOMETHING",
  payload: "something"
}

store を react で使うために Provider, connect が必要

Redux の store を作っただけでは、store は宙ぶらりんの状態で、React で使う準備はできていません。React で store を使うために、準備が必要です。この役割は react-redux が担います。

Provider

Provider コンポーネントで、App の一番上のコンポーネントをラッピングし、store を渡すことで、それより下のコンポーネントに対して、store を渡します。

// react と redux を結びつけるために react-redux を用いる
import { Provider } from "react-redux";

// 階層的に一番上のコンポーネントを Provider でラッピングし
// store を渡すことで、それより下位層で store を使用できるように準備する

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

connect

React Component に対して、store の state と dispatch を props として渡していくために使用するメソッドです。 これらを受け取った、新しいコンポーネントを作成します。

import React from "react";

// React Component に対して、
// store の `state` と `dispatch` を `props` として
// 渡していくために使用するメソッドです。
import { connect } from "react-redux";

// 普通のコンポーネントです
// someState(state) と doSomThins(dispatch するメソッド)
// を props として受け取っています。
// これは connect で渡されたものです
const Component = ({ someState, doSomeThing }) => {
  return <div onClick={() => doSomeThing("some")}>{someState}</div>;
};

// state のどの部分を、どういう名前で props として渡すかを定義する
const mapStateToProps = state => {
  return {
    someState: state
  };
};

// どのような dispatch を、どういう名前で props として渡すかを定義する
const mapDispatchToProps = dispatch => {
  return {
    doSomeThing: some => {
      dispatch({ type: "DO_SOMETHING", payload: some });
    }
  };
};

// コンポーネントに対して、store の state と dispatch を connect する。
export default connect(mapStateToProps, mapDispatchToProps)(Component);