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

子コンポーネントをどうするか

結局ここが気になってる。。
下記のようにしてみた。
最初からcreateElementしてcreateClassする意味ないじゃんって話になっているのかが不明。
値を引き継いで動いたからひとまず及第点かしら。

class HogeView extends React.Component {
    render() {
        ...
        const LinkList = React.createClass({
            ...
        });
        const LinkListElm = React.createElement(
            LinkList,
            Object.assign({}, this.props, { data: 'dataだよ'})
        )
        return (
            <div>
                {LinkListElm}
            </div>
        )
    }
}

JSXにしたかったので調整してみたり？？

...
const LinkListCom = () => (
    <div>
        {React.createElement(LinkList, Object.assign({}, this.props))}
    </div>
);
return (
    <div>
        <LinkListCom />
    </div>
)

classの使い方というかなんなの

2015/1にclassでcomponentが作れるようになったみたい。

React v0.13.0 Beta1でclassでComponentが作れるようになった - blog.koba04.com
http://blog.koba04.com/post/2015/01/28/published-react-v0.13.0-beta1/

ReactのComponentをClassで書く - Qiita
http://qiita.com/koichirokamoto/items/7c36055413ee3bba5410

ES6版React.jsチュートリアル - Qiita
http://qiita.com/nownabe/items/2d8b92d95186c3941de0

react-thunkが発火しなくて困った。

bindActionCreatorsとかdispatchとかpropとかいろいろ調べつつもよくわからない。。
結局、エラーにむきあいました。。

src/App.tsx(146,20): error TS2339: Property 'handleToggleCollapse' does not exist on type '{} & { children?: ReactNode; }'.

typescriptのコンパイルエラーで、ひとまず強引にreactのDTファイルをprop:anyにしたら動いた。。

なぜか描画してくれない

色々ためしたところreactのcontextを使っていると画面が描画されない。
action実行後にrenderが呼び出されない。
コンソールにエラーが出ているのでこれかもしれない。。
でも難しい。。

多分、このイシューと同じ。

Cannot have two HTML5 backends at the same time · Issue #186 · gaearon/react-dnd
https://github.com/gaearon/react-dnd/issues/186#issuecomment-110333064

エラーは出なくなった。
一度だけ初期化するようにするのが鍵だとのこと。

I think the key is that I only initialize dnd context once. What do you think?

import { DragDropManager } from 'dnd-core';
import HTML5Backend from 'react-dnd-html5-backend';

let defaultManager;

/**
 * This is singleton used to initialize only once dnd in our app.
 * If you initialized dnd and then try to initialize another dnd
 * context the app will break.
 * Here is more info: https://github.com/gaearon/react-dnd/issues/186
 *
 * The solution is to call Dnd context from this singleton this way
 * all dnd contexts in the app are the same.
 */
export default function getDndContext() {
    if (defaultManager) return defaultManager;

    defaultManager = new DragDropManager(HTML5Backend);

    return defaultManager;
}

import getDndContext from 'lib/dnd-global-context';

でも、renderは実行されなかった。。ちくしょーめ！

この辺、
DragDropContext.jsのdecorateContextあたりと同じコードだな。。
デコレートについて理解すればもうちょっと違う実装方法で行けるのかもな。。

react-redux setState - Google 検索
https://www.google.co.jp/search?sourceid=chrome-psyapi2&ion=1&espv=2&ie=UTF-8&q=react-redux%20setState&oq=react-redux%20setState&aqs=chrome..69i57.2874j0j4

mapStateToProps react redux render - Google 検索
https://www.google.co.jp/search?num=100&safe=off&espv=2&q=mapStateToProps+react+redux+render&oq=mapStateToProps+react+redux+render&gs_l=serp.3...1656.5156.0.6801.11.11.0.0.0.0.227.627.0j1j2.3.0....0...1c.1.64.serp..8.1.226...30i10k1.9OPf56801UQ

react-reduxでmapStateToPropsが呼ばれてるのに再度renderされない問題 - DRYな備忘録
http://otiai10.hatenablog.com/entry/2016/04/20/013348

fluxフレームワークreduxについてドキュメントを読んだメモ - fukajun - 僕はvimで行きます -
http://fukajun.org/66

DragDropContext invariant react ReactOwner - Google 検索
https://www.google.co.jp/search?num=100&safe=off&espv=2&q=DragDropContext+invariant+react+ReactOwner&oq=DragDropContext+invariant+react+ReactOwner&gs_l=serp.3...1069934.1073075.0.1073573.2.2.0.0.0.0.2768.2936.0j1j9-1.2.0....0...1c.1j2.64.serp..0.0.0.tGaQvKk7FAc

デバッガ

debuggerを入れるとデバッグできる！！今更なのか？便利だ！使いこなせない！
というか、そろそろ基礎が描いてある書籍とか読んでもいいのかも。。

使いこなせばrender問題が解決できるかしら。。

react-reduxでmapStateToPropsが呼ばれてるのに再度renderされない問題 - DRYな備忘録
http://otiai10.hatenablog.com/entry/2016/04/20/013348

そうすっと、 Connect の updateStatePropsIfNeededといういかにもそれらしいところでそれっぽい挙動がひっかかった

ステップインを繰り返して目を凝らし、、connect.jsの203行目に該当箇所が。。
でも、そのまえに、combineReducer.jsの113行目のhasChangedをtrueにしたら画面が更新された。。
このへん。stateを比較して変化があるかどうかの確認をしているが、ここがうまく反応していないってことだな。
おお、一歩近づいた。。

    var hasChanged = false;
    var nextState = {};
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i];
      var reducer = finalReducers[key];
      var previousStateForKey = state[key];
      var nextStateForKey = reducer(previousStateForKey, action);
      if (typeof nextStateForKey === 'undefined') {
        var errorMessage = getUndefinedStateErrorMessage(key, action);
        throw new Error(errorMessage);
      }
      nextState[key] = nextStateForKey;
      hasChanged = hasChanged || nextStateForKey !== previousStateForKey;
    }
    return hasChanged ? nextState : state;

これで目星の該当ファイルにたどり着くまでは気にせずステップインすればよくなったのかな？
だいぶ慣れてきた。。
routeごとで、stateの変化を比較しているが、、
previousStateForKeyがnextStateForKeyの変化に同期して変わってしまっている。
reducerによるstateの変更自体は実行されている。（というか、ここでreducerが実行されるのね。）
自分で実装した部分の、この辺りの書き方がきっと間違ってるんだな。。
ほぼ答えが近い予感。。

reducerの記述を変更して治った！！
stateがグローバル変数？的なことだったっぽい。
時間かかったなあ。。まあ、勉強になった。debugger便利！

Object.assign(state, ...}

Object.assign({}, state, ...}

ここまでを冒険の書に記録しますか？はい。（コミット）。次に行こうっと。