プログラミング

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

投稿日:2017年7月14日 更新日:

この記事に載せている 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


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Canvas と WebGL を使ったサンプルページを作りました

Canvas と WebGL を使ったサンプルページを作りました 目次1. スクリーンショット2. デモページ3. 内容4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット …

Web

OpenID Connect の処理フロー

OpenID Connect の処理フローを図にしました。

定期的にDOM要素をアニメーションするサンプルを用意しました

定期的にDOM要素をアニメーションするサンプルを用意しました。 DOM要素が対象ですので、div要素や img要素などが動かせます。 目次1. デモ2. ソースコード3. まとめ4. 参考 1. デモ …

normalizr の使い方

目次1. はじめに2. normalizr とは?3. 使い方ともう少し詳しい説明4. 関連 1. はじめに JavaScript のライブラリである normalizr の使い方を簡単に説明します。 …

web development

Web Development for Beginners を読む:レッスン1

目次1. はじめに2. Web Development for Beginners の進め方3. レッスン1「Introduction to Programming Languages and Too …