読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

Reduxって一体なんなのかちっとも分からないよ【追記あり】

reactjs redux

参考

経験談

  • Reactで気持ち複雑なチャットサービスをつくったんだけど、
  • 複数の子コンポーネントが変更しうるデータは、各々stateとして扱っちゃお互いに反映されないし、
  • だから大元データをstoreとして持ってる親コンポーネントからsetterのようなものをpropsとして渡すことになるんだけど、
  • コンポーネントでいらないsetterを孫コンポーネントに伝えるためだけにpropsとして渡すとか変なことになってるので、
  • 大親コンポーネントに渡すデータを一か所で管理するサブスクライバみたいなのがいて、子コンポーネントはそこへイベントをパブリッシュする みたいにすればいいのかなと思っていたんだけど
  • fluxがやりたいobserverパターンってそういうことなのかなという理解をした ←イマココ

やってみる

なんか、複数の子コンポーネントが、あるひとつのデータをお互いに変えれるようなモデルがいいなと思ったので、こういう感じでつくりました

http://otiai10.github.io/react-examples/ufo-catcher/

f:id:otiai10:20160419021750p:plain

ソースコード

github.com

雑感

  • Redux、なんか意識高そうだし、個人開発だとするとオーバーキル感否めないので敬遠してた
  • やってみたら、単にpub/subモデルというか、Observerパターンというか、なんのことはない
  • かつて自分が感じた不満をダイレクトに解決していたので、良さが分かりやすかった
  • 大親コンポーネントから子コンポーネントへのpropsの受け渡しは、やっぱりだらだらやらなきゃいけないんだろうか
    • そんなことはなかった。さすが。下記追記を参照
  • ReducerやActionCreaterをちゃんとつくって、combineReducersとか使い始めたらもっと意識高い
  • Thanks to プロフェッサー subuta

DRY

ベルリンに引っ越しました。ご支援いただけるとマジでうれしいです! ほしいものリスト(ベルリンに引​っ越した)(わりと必需品)

追記: 2016/04/19

大親コンポーネントから子コンポーネントへのpropsの受け渡しは、やっぱりだらだらやらなきゃいけないんだろうか

そんなことはなくて、子コンポーネントだろうが孫コンポーネントだろうが、勝手にconnectして、そのときのconnectの第1引数であるmapStateToPropsでちゃんと処理すれば、その末端コンポーネントthis.propsとして扱える。だから、必要なComponentで必要なpropsにアクセスできるので、よいね、っていう話。

そのコミット と、そのときつまずいた問題。

otiai10.hatenablog.com

Don't Repeat Yourself