TL;DR
フロントエンドが苦手でQiitaや公式ドキュメントで「Fluxってこういうものだよ！」という説明文を読んでも理解が上滑りしてしまっていた。
いまいち理解できていないまま数ヶ月サーバーサイドをガッツリ触って久しぶりにフロントエンドで悩み苦しんでいたら少し読み解けたのでどこで詰まっていたのか整理しがてら恥ずかしい話しシリーズ2つ目として書き出す。
理解があってるかどうかは保証しない。
以前参考に読ませてもらったエントリ
読んだ当初の理解としては↓な感じ。
- Fluxというのがデータの一方通行なアーキテクチャ、あるいは設計になっていること。
- Container is どこ（何）？
- Storeはなんかデータに関する管理を担う層っぽいけどじゃあStateってなんやねん？
-
stateとpropsがあるのはわかるけどStoreとかで操作してるのはstateなのになんでいきなりViewでpropsになってんの？？？
理解できたことその1: StateとStoreの関係性
きっかけは些細なことだったのだけどいままで一番理解に苦しむというか意味わかんねえなーと思っていたことの1つがStoreとStateの関係性。
自分のなかで腑に落ちたのはStateがDBにおける行(レコード)でStoreがテーブルという風に理解したらあーなるほど？みたいな気持ちになってデータの流れがようやく繋がるようになった。
よくわからないなーと思ったときは「何かに例えてみるとよい」みたいなことをエンジニア生産術の本にも書いてあった気がするが確かに例えることで自分のなかのイメージとコードや設計などがより明確にイメージできるようになった。
なんかよくわからんがわかったような気になってると思ったときは自分の知っている別のなにかに置き換えて説明して意味が通じるか確認するのがよいのかもしれない。
理解できたことその2: Viewのpropsは実はContainer.stateだった
ちゃんとコードに答えが書いてました。
コードはよく読もうな！という他ない。
class FoolContainer extends Component {
render() {
return FoolView(this.state)
}
}
function FoolView(props) {
...
}
……言い訳するとstateとpropsはReactやFluxが扱う黒魔術的な存在が管理していてアンタッチャブルなものだという認識をしていた。
なのでよくわからんがReactとかしか触れないグローバル領域のようなものがあってそこから必要になったときに渡されているというイメージを持っていた。
実際には愚直にバケツリレーしてデータそのものを受け渡してただけだったんだけど何故か天から謎のデータが降り注ぐイメージを持ってた。
ただまだいまいちわかってないのが同僚に「何故Viewに渡すときにstateからpropsに名称が変わっているのか？」と質問したところ「慣習的にそういうものとして扱われている」という解答を得たのだけどそこがちょっとよくわからなかった。
ただじゃあそれをググってみようと思ってもどうググればいいのかという検討がつかなかったので一旦諦めた。
理解できたことその3: Stateが変更されない問題
ReduxのStateが変更されたのに再レンダリングされない問題
そのままズバリなまとめを書いていてくださった方がいたので恐らくReactに入門した人が通りやすい道なのかもしれない。
state = { name: 'hoge' }
ではなく…
state = [{name: 'hoge'},{name: 'fuga'}]
みたいなときに…
payload.names = [{name: 'hoge-ex'},{name: 'fuga-ex'}]
state = payload.names
しようとしたけどうまくいかなかった。みたいな話し。
ちょっと手元に検証可能なコードがないのでだいぶ記憶任せなコードになっているのでそもそも前提があってない可能性があるがネストが深いところのデータの更新をしたはずなのにViewが再描画されない。
値が更新されていない！！！みたいな現象があって盛大にハマったということだけ覚えているのでまあ同じような理由といえる。
まとめ&反省：
わかってしまったいまとなっては何故そこで躓いた？という気持ちが強いが半端に知識があったり、恐らくなにかを読み飛ばしたかわかったつもりになってスルーしていたのだろうと思われる。
雰囲気で理解した気持ちになるの本当によくないし、完全に悪なのでやめろということです。
ちゃんとチュートリアルみたいなのからやらないからそうなったんだろ！とかいろいろ原因はあるけども苦手意識と分かる人に任せっきりでちゃんと最初から入門しなかったのが多分一番よくなかった。
冒頭で紹介しているQiitaのエントリ、今読み直したら最初に読んだときと全然理解度が違ったのでもう一度しっかり読み直そうと思います。