React+Reduxにも触れてみる 4. がしがし整理していった結果

背景

前回こういうことをして、React-Reduxの動作を把握した。

frogwell.hatenablog.jp

で、それをうまーく整理していくと第二回で紹介したgitのような構成にできる。

frogwell.hatenablog.jp

今回はそこまでの過程というか、その過程で起きたことをだらっと書いていく。

まずfileの分割

とりあえずapp.jsxから以下のように分離してみた。

% tree .
.
├── ReflectForm
│   └── FormApp.js
└── app.jsx

で、こう呼び出して、

import FormApp from './ReflectForm/FormApp';

ここだけきりだしてみる。

import React from 'react';
/* import FormInput from './FormInput';
 * import FormDisplay from './FormDisplay';*/

export class FormApp extends React.Component {
  render() {
    return (
      <div>
      <FormInput handleClick={this.props.onClick} />
      <FormDisplay data={this.props.value} />
      </div>
    );
  }
}


FormApp.propTypes = {
  onClick: React.PropTypes.func.isRequired,
  value: React.PropTypes.string,
};



export class FormDisplay extends React.Component {
  render() {
    return (
      <div>{this.props.data}</div>
    );
  }
}


FormDisplay.propTypes = {
  data: React.PropTypes.string,
};

export class FormInput extends React.Component {
  send(e) {
    e.preventDefault();
    this.props.handleClick(this.myInput.value.trim());
    this.myInput.value = '';
    return;
  }
  render() {
    return (
      <form>
      <input type="text" ref={(ref) => (this.myInput = ref)} defaultValue="" />
      <button onClick={(event) => this.send(event)}>Send</button>
      </form>
    );
  }
}


FormInput.propTypes = {
  handleClick: React.PropTypes.func.isRequired,
};

で、buildしてみる。

Hash: 31e465dc0d904f9d09e3
Version: webpack 2.3.3
Time: 2472ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  2.1 MB       0  [emitted]  [big]  main
   [0] ./~/process/browser.js 5.3 kB {0} [built]
  [31] ./~/react/react.js 56 bytes {0} [built]
  [55] ./~/redux/es/index.js 1.08 kB {0} [built]
  [88] ./~/redux/es/compose.js 965 bytes {0} [built]
  [89] ./~/redux/es/createStore.js 8.79 kB {0} [built]
  [90] ./~/redux/es/utils/warning.js 637 bytes {0} [built]
  [92] ./src/ReflectForm/FormApp.js 4.51 kB {0} [built]
  [93] ./~/react-dom/index.js 59 bytes {0} [built]
  [94] ./~/react-redux/es/index.js 194 bytes {0} [built]
  [95] ./src/app.jsx 2.07 kB {0} [built]
 [133] ./~/react-dom/lib/ReactDOM.js 5.14 kB {0} [built]
 [192] ./~/react-redux/es/connect/connect.js 5.34 kB {0} [built]
 [211] ./~/redux/es/applyMiddleware.js 1.8 kB {0} [built]
 [212] ./~/redux/es/bindActionCreators.js 1.98 kB {0} [built]
 [213] ./~/redux/es/combineReducers.js 5.58 kB {0} [built]
    + 203 hidden modules

一応buildは通っているっぽいな。

でもいざ表示させてみたらviewが出てこなかった。うぬぅ？

viewが出てこなかった原因

qiita.com

これを見る限り特におかしい感じではない。

あ、でもconsole.log(FormApp)とするとundefinedになる。

export defaultとつけたらとれた。

defaultなしでも、import {FormApp} from './ReflectForm/FormApp'とするととれる。

uehaj.hatenablog.com

返すことができる値は単一値であるから1つだけである。export defaultが1つのJSファイル中に複数あれば、ES6の仕様上は本来はSyntax Errorであるが、現在のBabelの振舞いとしては(2015/11/18追記)、後勝ちで上書きされるようである。

なるほど。

残った部分

実は他のことは全部第二回に書いてあるのでそちらを参照のこと。順番前後して申し訳ない。

Redux DevTools

ところでReduxをdebugするにはRedux DevToolsという便利な物がある。chromeやfirefoxのextensionとして導入できる。

github.com

ただしこれを実行できるようにするためにはcodeの一部をいじる必要がある。Storeの設定を以下のように修正する。

const store = createStore(
  formReducer,
  initialState,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

このwindow.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()の部分を追加することでextensionがreduxを解析してくれるようになる。