はぜにっき

日記です。（毎日更新ではない）

雑記: Redux 難しい

Enginnering

仕事でたまにReactを触るんだけど、正直周りのコードを見ながら雰囲気で書いているので、たとえば1からProduction用にフロントやってくれって言われたら声が出なくなって灰になって死ぬ。
そんな遠くないうちに自分でWebサービスを作ったり、仕事でSPAもAPIもガッと作るときが来るだろう、ということで最近は色々調べたりし始めた。

今はReduxについて調べたり、Code Sandboxで眺めてみたり、自分で書いたりしているところなんだけど、自分で書く時に露骨に手が止まるのをどうにかしたい。
ボイラープレートみたいなの欲しい。のでそのうち作りたい

軽くReduxについて（だいたい）理解した概念をまとめておく　してないのもある

そもそもReduxって何

ReactをView専用として使って、Storeっていう概念を中心に状態を管理する仕組み。狭義は reduxjs/redux 。
ReactにはHOCで値を流し込むと、それを元にReactが描画してくれるようにつくる。

ReactのStateの使いどころ

Reactにも元々Stateっていう状態管理用の仕組みがあって、それをどう使い分けるかについて。

ツイートに書いてある通りなんだけど、コンポーネントを越えるStateはReduxのStoreに入れて、コンポーネント内で完結するStateはReact Storeを使う。
実際のところ、コンポーネント1つだけで完結するような状態はそんなにない（と思う）から殆どはStoreに入ることになる

ツイートのリブセンスさんところのエントリがめっちゃわかりやすくて良い

Actionとかdispatchとか

jimbo先生のスライドを見ればなんとなくわかる　気がする。　勝手に引用してすみません

speakerdeck.com

だいたいActionがだるくなってくるから、repatchを使ったり、Typescript-fsaを使ったりするっぽい。
どうやって書くかはわからん

Functional Conponent

元々SFCって言われていたやつ。
状態を持たないコンポーネントをシュッとかけるっぽい。
状態を持たない＝Functionalだし普通に関数で書けばよくね？？？という発想。なんか難しそうに聞こえるけどただの関数なので大したことはない

ただ、状態を持つFCがあったりHooksがあったりしてその辺は謎。だれか教えてくれ

APIからデータをどう取ってくるか　とか

なんか色々やり方があって謎
耳にするのは thunk, saga, promise 辺り。今ここで困っている。
外部へのHTTP通信を含んだReactのライフサイクル周りをイメージでいないから、多分非同期処理以前にReactちゃんとわかってないんだと思うけど

それっぽいsampleはcode sandboxにあったけどまだちゃんと理解してない

他

最初みたときポインタか？？？？って思ったけど違うっぽい
なんか説明が難しいけど、だいたい他言語のProcとかyieldを使ったやつと同じ。多分

TypeScript

www.typescriptlang.org

ドキュメントを読もう

js.studio-kingdom.com

日本語版のTypeScript-Handbookもある。　今知った

VS Code使っていればTypeScriptにしたほうが色んなとこに飛べるようになって便利。ただJavascriptのコードをコピーして手を抜こうとすると色んなところで型がないぞって怒られてつらくなる

とりあえずコード書いたり写経したりして概念を掴んでいきたい。
ところでみんな最初どうやって理解してるの？？？ドキュメント全部読んでなるほど〜〜って言って自分で一から書けるのかな。
自分は参考になるコードを丸コピしてそれを継ぎ足ししながら少しずつ概念を覚えていくほうが楽で良いんだけど、なんか色々調べても丸っと使えるのはなくてだめっぽい。自分でなんか作れという話ではある