一つのファイルで完結するシンプルなReact+Reduxアプリケーションサンプル

SimpleReactReduxAppSampleCompletedInOneFile.js

/**
 * @file 一つのファイルで完結するシンプルなReact+Reduxアプリケーションサンプル
 */

import React from "react";
import { render } from "react-dom";
import { createStore } from "redux";
import { Provider, connect } from "react-redux";

//
// 1. Reduxステートを定義します
//

// 1-1. Reduxステートのプロパティと初期値を定義します
const INITIAL_STATE = {
  clickCount: 0
};

// 1-2. Reduxステートの操作(アクション)種別を定義します
const SET_COUNT = "ClickCounter/SET_COUNT";

// 1-3. 操作実行オブジェクトを作成する関数(アクションクリエーター)を定義します
function setCount(count) {
  return {
    type: SET_COUNT,
    payload: count
  };
}

// 1-4. 操作実行オブジェクトを元にReduxステートを更新する関数(レデューサー)を定義します
function reducer(state, action) {
  switch (action.type) {
    case SET_COUNT:
      return {
        ...state,
        clickCount: action.payload
      };
  }
  return state;
}

//
// 2. Reduxステートと接続するコンテナコンポーネントを定義します
//

// 2-1. コンポーネントを定義します
class ClickCounterComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  render() {
    // connect関数を実行する(コンテナ化)すると `props` に次の情報が設定されます
    // a. `mapStateToProps` で指定した、Reduxステートのプロパティと対応付けたプロパティ
    // b. `mapDispatchToProps` で指定した、Reduxステート更新操作実行関数
    // a.は表示に、b.は操作に使います
    return (
      <a href="#" onClick={this.handleClick}>
        You clicked this link {this.props.clickCount} time(s).
      </a>
    );
  }
  handleClick(e) {
    // Reduxステート更新操作実行関数を直接イベントハンドラに指定することも
    // できますが、慣れないとわかりづらいのでイベントハンドラとなる関数は
    // コンポーネントの関数として定義し、その中でReduxステートの更新を
    // 行うようにするのをおすすめします
    this.props.actions.setCount(this.props.clickCount + 1);
  }
}

// 2.2 コンポーネントの `props` に追加するプロパティとReduxステートの
// 対応関係を定義して返す関数を定義します
function mapStateToProps(state) {
  return { clickCount: state.clickCount };
}

// 2.3 コンポーネントの `props` に追加するReduxステート更新操作プロパティを
// 定義して返す関数を定義します
// この関数の戻り値で定義する関数は慣習的にはアクションクリエーターと同じ名前を
// 用いますが、同じである必要はありません。むしろ別物であることを理解しておく
// 必要があります。
function mapDispatchToProps(dispatch) {
  return {
    actions: {
      setCount: function(count) {
        // アクションクリエーターで生成した操作実行オブジェクトを `dispatch` 関数で
        // Reduxに引き渡します。
        // Reduxは引き渡された操作実行オブジェクトをレデューサーに引き渡し、
        // 発生した変更をコンテナコンポーネントに反映させます
        // (変更が反映されることによってReactはコンテナコンポーネントを再描画します)
        dispatch(setCount(count));
      }
    }
  };
}

// 2.4 `connect` 関数を実行してこれまでの定義を一つにまとめコンポーネントを
// コンテナ化します
const Container = connect(
  mapStateToProps,
  mapDispatchToProps
)(ClickCounterComponent);

//
// 3. コンテナコンポーネントにReduxステートを引き渡すようにします
//
const App = () => {
  // 3-1. レデューサーとReduxステートの初期値をもとにしてストアを作成します
  const store = createStore(reducer, INITIAL_STATE);

  // 3-2. コンテナコンポーネントをProviderコンポーネントでラップして
  // 子のコンテナコンポーネントにストアの情報が届くようにします
  return (
    <Provider store={store}>
      <Container />
    </Provider>
  );
};

//
// 4. コンポーネントを実行します
//

render(<App />, document.getElementById("root"));