reduxを使うためにいろいろお勉強5


# キーワード、関数など

## コンポーネントのライフサイクルメソッド

http://www.atmarkit.co.jp/ait/articles/1607/26/news138.html

> 「componentDidMount」「componentWillUnmount」はコンポーネントのライフサイクルメソッドです。

## componentDidMount

読み込み時にアクションを呼び出す

react-reduxでページ読み込み時、actionを呼び出す方法 | Gaku'sMemo
http://goo.gl/lVwP0V

ちょっとわかり始めた時に、かなりいい例示コードな気がするんだけどどうかな

Reduxで定期的なアクションを実行する簡単なサンプルを作ってみた | WebDesign Dackel
http://goo.gl/UFJOR7

## componentWillUnmount

マウントの後のアクション呼び出し

## require.ensure

jsファイルを後から読み込
webpackによる分割をするための記述で、ひきすうで分割後のファイル名を指定できるのか、
なるほど、分割されたjsファイルをちゃんと命名してあげる

webpackのrequire.ensureでDynamic Loadingをして大規模アプリケーションを作る - Qiita
http://goo.gl/Mbwxpi

## createSelector

便利らしい。

Reduxのreselectとは - Qiita
http://goo.gl/RM31To

## connect

connect,mapStateToProps, mapDispatchToPropsあたりの位置付けがよくわからない

公式にもある、mapStateToPropsの内部で処理をするのは、
State is read-only(状態の更新はアクションからだけ？)
に反していないのかどうなのか。

## subscribe, propTypes

http://mae.chab.in/archives/2885

	この辺に書いてあることもちょこちょこよくわからない。

なるほど。

> むしろややこしいのがReact-Reduxを使ったReactとReduxの連携の方だと思います。特にconnectメソッドの部分で、自分も最初何のことやらと戸惑いました。実際に動きを確認しながら実装してみることで、それなりに理解できるようになるかと思います。





# 課題や不明点

## コンテナのファイルにいれるか、コンポーネントのファイルに分けるか

https://github.com/reactjs/redux/issues/239

ここの例だと、コンポーネント部分の処理はそこまで複雑ではないけど、コンテナにjsxを書いている。

## ミドルウェアを活用するべき？reduxの弱点への対策？？

Reduxのmiddlewareを積極的に使っていく - Qiita
http://goo.gl/Ufvk2k

> Actionを投げる部分ってのはだいたい何かのイベントハンドラだったりしますが、そういう場所に通信やインタラクションの処理をダラダラと書きたくない。
本稿ではそれらの面倒な部分を責務が分離されたメンテナンスのしやすいコードになるようにmiddlewareを活用する例をいくつか紹介します。

> 2つのmiddlewareを通じてどうやって肥大化、複雑化する非同期処理、副作用コードと戦っていくかを示しました。middlewareはStoreに直接アクセスできることから、やろうと思えば何でもできちゃうところが強力でもあり、混乱のもとにもなりえます。幸いなことにmiddlewareを細かく分割しても applyMiddleware で簡単に結合できますし、困ることはありません。またmiddlewareにすると他のプロジェクトでも同じパターンが使えることが多いです。

## React.createClass


リスト表示＋ページングを実装しながらReact.jsを理解してみる - Qiita
http://goo.gl/XdhqND

reactで、jsxを分割する時に使った。
reactのコンポーネントの一種でトップレベルAPIに含まれる基本的な概念っぽい。

Top-Level API | React
https://goo.gl/RfLAc4


React.jsのComponentについて - Qiita
http://goo.gl/Sh3u96

> つまりElementではないので、使うときにはReact.createElement(Component, {name: 'xxx'})のようにReact Elementにしてあげる必要があります。ちなみにReact.createFactory(Component)とやることも出来ます。
ただJSXを使っている場合は、これまでと同じようにReact.createClassの戻り値を<Component />のように直接渡しても大丈夫です。

JSXではエレメントと相違なく違和感なくよびだせるけど、スクリプトの時にはエレメントに渡す。。っぽい。

## Reactのコンポーネント

JSXでコンポーネントを呼び出したりするけど、見た目は一緒に見えてもその実体？は、
createElementで作ったエレメントだったり、createClassで作ったカスタムコンポーネントだったりする。。？？

React.jsのComponentについて - Qiita
http://goo.gl/Sh3u96

Top-Level API | React
https://goo.gl/RfLAc4

React 0.13 日本語リファレンス | js STUDIO
http://goo.gl/OIUbeS

React 入門 #2 - Component
http://goo.gl/AoT2JA

いまさら聞けないReact、Virtual DOM、JSX超入門 (1/3) - ＠IT
http://goo.gl/UFLFsL


## ループのdomのためにユニークなキーを振るべし

配列に対してキーは事前に振っておかないとだめなのか、あとでループの時に簡単にインデックスと取れないのか。

下記でできた。コードのコメントをみると、

```
The provided mapFunction(child, key, index) will be called for each leaf child.
```

とあり、下記のようにしたらキーが振れた。
でも、indexを追加するとリストの値が入ってきたんだけどどういうことだろう。
オブジェクトの配列とかだったら要素のキーが入るということかな。

```
this.props.data.map(function (row, key)
```

Support map(), filter(), find() and forEach() on cursors · Issue #32 · dustingetz/react-cursor
https://goo.gl/XbbtLh

React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
http://goo.gl/EyFFCv

React.jsの地味だけど重要なkeyについて - Qiita
http://goo.gl/1wsyZH

## ループで描画

基本はdomのパースとかはするなということかしら？？

React.jsのJSXで条件分岐・繰り返しを記述する - Qiita
http://goo.gl/tKv7TE

## 仮想ではないhtml domを出力

JSXを使わずにreact-jadeで仮想DOM出力 - Qiita
http://goo.gl/fqKX7o

Dangerously Set innerHTML | React
https://goo.gl/c8urRH

```
function createMarkup() { return {__html: 'First &middot; Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
```

javascript - How to convert an HTML string to virtual DOM in React? - Stack Overflow
http://goo.gl/ONbgjc

	あとから作ったdomをreactに取り込むことの苦労かな？
	react-magic
	DocParser

html-to-react
https://goo.gl/NeCi2J

## 関数を子コンポーネントから呼ぶ

トップレベルのreducterから渡されたpropsのなかの関数を、子のコンポーネントから呼び出したいのだが、、dataのように渡すのは気持ち悪い気がする。。

複数のコンポーネント | React
https://goo.gl/sHBpNc

React.js で親子関係にある component の更新順序 - scramble cadenza
http://goo.gl/tvezro

どうも、この例ではthis.incrementを渡しているみたい。

```
<Child increment={this.increment} />
```

ReactなComponent同士を連携させたい | moxt
https://goo.gl/CY2pMz

コンポーネント間の連携 | React 0.13 日本語リファレンス | js STUDIO
http://goo.gl/NIVC6s

この辺を見ると、propsでわたしたり、コールバックを渡すのはありっぽい。
さらに複雑な場合にはjQueryとかFluxをつかうとか書いてる。。


react-router v2.xとcontext | Solutionware開発ブログ
http://goo.gl/63iICd

> contextを使用すると、データの流れが不明瞭になりますので、コードを理解するのが難しくなります。あなたのアプリでcontextを使うということは、グローバル変数としてstateを受け渡すのと同様のことなのです。

contextを使うと、バケツリレーをしなくていいらしいけど、推奨されないっぽい。

reduxの場合には、、dispatchが関係するとうまくいくかもしれない気がする。。


このへんのことは、reduxではなく、reactの原理としてpropsで伝播させることが影響しているのかな。
純粋なreduxだけだと、connect関数でpropsに紐付けるのではなくて、storeからディスパッチするっぽい？？

http://mae.chab.in/archives/2885

> ```
store.dispatch(actionCreators());
```

http://stackoverflow.com/questions/34655707/react-redux-connect-api-does-not-inject-dispatch-property

> ```
TestLab = ReactRedux.connect(select)(TestLab);
```

ここまで調べて、、下記の記事に似たようなことがより深められているなと思った。

http://takayukii.me/post/20160122426

> ReducerはfluxのStoreから部分的にロジックを切り出したもので、ActionからどのようにStoreの値へ落としこむかのロジックだと思います（値を書き換えないという違いはありますが）。fluxだとこれを完全にStoreの内部でやっていて、AppDispatcher.registerのcallbackでswitch文まみれになっている箇所がそれです。このサンプルなんかはReducerですがswitch文になっていてStoreのあの箇所とよく似ています。

> 上記のエントリでは、Immutable.jsを利用して回避したそうです。こんな感じになります。

> state.getなどメソッド経由でアクセスするのが面倒ですが、Reactコンポーネント等の読み取りで利用する場合はtoJS()でオブジェクト化してアクセスする事もできます。

> Object.assignを使うほうが一般的かもしれません。

ここまででは幾つかの選択肢が挙げられているが、、どうするべきか、、。
少なくともバケツリレーを回避することは状態変更などを伴わない、
コードがあまり複雑化しないのなら（？）アリっぽい気がする。

下記のようにpropsごと子に渡してみたら実行できたがダメかしら。。

```
<LinkList parent={this.props}/>
```

この辺がどうも気持ち悪い。。JSXで指定するのではなく、もっと頭の部分で管理したいんだけど。。
もしくは、親コンポーネントから許可するみたいな形式。
もういっか、結構な時間をかけて調べたし。そのうちわかるかもしれないし。

## 子コンポーネントの制御

この制御を親に移譲するという考え方だと、プロパティを引き継ぐ時に考え方が比較的しっくりする。
また、プロパティを受け渡す時にもそのまま受け渡すのではなく、
初期値として受け渡して、内部のプロパティ管理と区別すると良い。

React.jsでES6の文法を使って defaultProps などを設定する - Qiita
http://goo.gl/7KdegI

React.jsのProp - Qiita
http://goo.gl/21KzFE

React FluxアプリをReact Redux(ES2015)で書き直した時のメモ | 69log
https://goo.gl/n1lEHU

React.jsでPropやStateを使ってComponent間のやりとりをする - Qiita
http://goo.gl/EyFFCv

継承を使えば、親コンポーネントのsuperで関数を実行できるのかな。
これは、、どうなんだろう。

React.createClass versus extends React.Component @toddmotto
https://goo.gl/PUybgw

## 子コンポーネントをどうやってつくるか

* カスタムコンポーネント(createClass)
	* さらにcreateElementする
		本当の意味でクラスが必要なら意味がありそう
	* そのままJSXで使う
		this.propsを引き継ぎはJSX上で行うので面倒もあるかも
* エレメント(createElement)
	JSXではあたいの引き渡しができないっぽいが、this.propsを引き継げる。
	基本はこれでいいんじゃね。。。

## this.props.dispatchを使う

pushState in Redux Router - (rudolph-miller)
https://goo.gl/2BsAkC

dispatchをconnectするときに使う。

時期では配列に含めたり、bindActionCreatorsと階層を分けるようにしたりしているが、そのままassign()でもいけるのはいけるっぽい。

```
return bindActionCreators(Object.assign({}, {dispatch: dispatch}, {doubleAsync: doubleAsync}), dispatch)
```

ハンドラーを一括で記述するのは下記みたいに記述するっぽい。三点リーダーは配列の展開だっけ。

```
export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);
```

まあ、使う必要はないのかも。

## 非同期のActionCreatorのreact-thunk

下記参考したいのだが、まだわかってない。

http://takayukii.me/post/20160122426


## 日本語ドキュメント

Top-Level API | React
https://goo.gl/z1xknR

.htmlを-JP.htmlにすると日本語なのか。。でもサイドバーはいつも英語のリンク？なんで？
存在しない場合もあるな。。

## bindActionCreators

ある程度必要なチェックなどをしつつ、
dispatchを自動でしてくれるのが主な動きの関数という認識でいいのかな。
じゃあ、使ったほうがいいか。。

/node_modules/redux/lib/bindActionCreators.js

## シンプルな構成にするのも大事なのかも。

まだ、発展途上なんだなあ。。っと思った。
現状でも便利ではあるけど依存度が強くなりすぎないように気をつけないといけないのかもしれない。

http://qiita.com/193/items/7ff650616dd8f34804f4




# ひとまず参考

## 便利さを求めて

redux/Examples.md at master · reactjs/redux
https://goo.gl/Monlqw

redux/examples at master · reactjs/redux
https://goo.gl/JYRlFJ

xgrommx/awesome-redux: Awesome list of Redux examples and middlewares
https://goo.gl/7bymxh

redux/examples/tree-view at master · reactjs/redux
https://goo.gl/4Xqy5m

Redux ちょっとわかってきたこと - Sphereとともに
http://goo.gl/7Q35Vm

## 日本語ドキュメント的なもの

React Native Redux ドキュメント 参考リンク集 - Qiita
http://goo.gl/tcN8iJ

チュートリアル | React
https://goo.gl/obkdbE

	fb公式

## 勉強になりそうだけどまだ

リスト表示＋ページングを実装しながらReact.jsを理解してみる - Qiita
http://goo.gl/XdhqND

React Style Guide を日本語訳した - Qiita
http://goo.gl/oxUVbj

	フォームを作るのにハンドラー

Reactでリスト（配列）のFilter機能とSort機能を実装する | mae's blog
http://goo.gl/LXFPuJ

	ソートとフィルターの実装でanglarと比較しつつ。。

すべてのReact.js初心者が知っておくべき9つのポイント - Qiita
http://goo.gl/lSQdrL

	大事そう
	proptypes
	ステートレス
	テスト駆動

## プロトタイプのフロー

まだない

## それるけどjsdoc

jsdocってモダン？？

JSDoc使い方メモ - Qiita
http://goo.gl/84j9xC

Google JavaScript スタイルガイド - 日本語訳 - JSDocコメント
http://goo.gl/pxUIuQ