React + Redux の最小限の雛形コード

投稿日：2017年7月14日更新日：2021年7月26日

この記事に載せている JavaScriptのコードは、React + Redux を使っています。

但し、まだ何も意味のある処理を書いていないので、このままだと属性 id="root" を持った要素内に、以下のHTMLを出力するだけです。

<div>ここにHTMLを書きます。</div>

React + Redux を使ってシンプルなウェブページを作成する時の雛形として利用することができます。

実際にこのコードを利用する場合は、webpack などのモジュールバンドラーを利用することを想定しています。

JavaScript のコード

import React from 'react'
import { render } from 'react-dom'
import { Provider, connect } from 'react-redux'
import { createStore } from 'redux'
//import PropTypes from 'prop-types'

//-----------------------------------
// Action creators (Actionを返す)
//-----------------------------------

// 現段階では Action creators は使わないのでコメントアウトしておく
//const anAction = () => {
//  return {
//    type: ''
//  }
//}

//-----------------------------------
// Reducer
//-----------------------------------

const appReducer = (state = null/*, action*/) => {
  return state
}

//-----------------------------------
// Component
//-----------------------------------

class AppComponent extends React.Component {
  //constructor(props) {
  //  super(props);
  //}

  render() {
    return (
      <div>
        ここにHTMLを書きます。
      </div>
    );
  }
}

AppComponent.propTypes = {};

//-----------------------------------
// Container
//-----------------------------------

const AppContainer = (() => {

  const mapStateToProps = (/*state, ownProps*/) => {
    return {};
  }

  const mapDispatchToProps = (/*dispatch*/) => {
    return {}
  }

  return connect(
    mapStateToProps,
    mapDispatchToProps
  )(AppComponent);

})();

//-----------------------------------
// Store
//-----------------------------------

const store = createStore(appReducer)

//-----------------------------------
// 画面に表示する
//-----------------------------------

render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
)

執筆者：labo