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

こんなのつくりました

ytnk531.hatenablog.com

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

• SVG
• JavaScript
• React
• Redux

動機

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

問題

• 読めない
  • [...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というコンポーネントにロジックをまとめられる。

やったこと

• ビデオ Getting Started with Redux
  • https://egghead.io/lessons/react-redux-react-todo-list-example-adding-a-todo
  • Redux単体からreact-reduxまで
  • 平均5分くらいの動画が30本
  • ES6のよく使うシンタックスも教えてくれる
• 公式のBasicsあたり
• Qiita Redux入門【ダイジェスト版】10分で理解するReduxの基礎
  • なんか複雑な絵が描いてあって気がめいった

メモ - 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
• アニメーションしたい