マイペースなRailsおじさん

Ruby、Ruby on Rails、オブジェクト指向設計を主なテーマとして扱います。だんだん大きくなっていくRuby on Rails製プロダクトのメンテナンス性を損なわない方法を考えたり考えなかったりしている人のブログです。

React + Reduxをさっくりと覚えた

こんなのつくりました

ytnk531.hatenablog.com

(さっくりと)覚えたこと

動機

  • フロントエンドのコードを読みたい
    • 障害の原因調査が捗りそう

問題

  • 読めない
    • [...array1, ...array2]
    • { key1 } = object
    • {...object1, ...object2}
  • なにやってるかわからない
    • 階層化されたコンポーネント
    • イベントを処理する流れが追いかけられない
    • reducerとかいう謎の単語

さっくりと覚えていく

React

動的なUIを宣言的に書ける。

やったこと

  • 公式サイトのチュートリアル
  • create-my-react-appで作ったテンプレートをいじくる
  • ソートするやつを作る

メモ

  • DOMコンポーネント
    • HTMLの塊を部品として定義して再利用可能にする
    • props
    • state
      • コンポーネントの内部で保持している値(フィールド)
      • stateの更新はめんどくさい
    • propsやstateが変化すると、DOM要素が再描画される(儀式が必要)

Redux

stateを一か所に集めて、stateの更新と反映を行えるようにする。
Observerパターンのちょっとマッチョなやつ。
Reducerというコンポーネントにロジックをまとめられる。

やったこと

メモ - dispatcherで生成したアクションをreducerで受け取って新しい状態を計算する - stateをsubscribeして画面を再描画する

Recat-Redux

propsにstateとdispacherを渡せるようにする。
状態の更新⇒再描画のための儀式がゴッソリ消える。
ReactDOMコンポーネントはビューを返すためだけに使えるようになる⇒スッキリする

やったこと

  • Reduxの流れで一緒に学習
  • ソートするやつをリファクタ

新しい発見

  • コンパイルエラー相当の静的解析はしてくれる
    • トランスパイルするから当たり前なんだけど盲点だった
  • 環境構築めっちゃラク
  • ライブラリごとに使うメソッドの数が少なかったので、あんまり覚えなくてよかった
  • 画面で動くの楽しい

つまづいたところ

  • 当初、Reduxを使うことにあんまりメリットを感じなかった
    • とりあえずReactコンポーネントで状態管理してみた
    • ⇒カオスになった(Reduxを使うまではそこまでカオスだとも思ってなかった)
  • Presentational ComponentとContainer Componentの構成
    • どうやってState Treeを構成すべきか悩ましい
  • Presentational Componentにどれだけロジックを入れるか悩ましい
  • SVGのアニメーションむずい
  • sleep()ないんですか

つまづかなかったところ

  • npm
    • gradleとだいたい同じ
  • Reduxの概念
  • 純粋関数

今後

  • テストしたい
  • reduxで副作用したい⇒redux-saga
  • アニメーションしたい