進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 1/14 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 50% 完了
• React 公式チュートリアル *完了

今日やったこと

• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！

Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！

ざっくりサマリー

• 検出できないエラーがあるとデバッグが難しい

  • ソースを追っていかないといけない → このトラブルシューティングはコストが高い
  • actionのtypeは定数にしておくという慣習がある → タイポしたときにバグを検出できる

• PropDrilling問題

  • propsのバケツリレーのこと
  • コンポーネントに関係ないpropsがあると見通しが悪くなる
  • この問題の解決のためにReduxが使われるようになった
  • 大規模であればReduxは便利だが,小規模だったらuseContextを使った方が楽

• Context

  • 状態管理をしてくれる
  • 規模によってcontextをいくつ作るか
  • 共有したいデータを持つコンポーネントとそれを受け取るコンポーネントの両方で使う
  • 共有したいデータを持つコンポーネント → プロバイダー
  • とそれを受け取るコンポーネント → コンシューマー
  • プロバイダーでトップレベルコンポーネントをラップ
  • Contextを使う方法

  • プロバイダーとコンシューマーの方法

    • プロバイダーが流したデータをコンシューマーが関数の引数として受け取る

      <MyContext.provider value={/* 流したいデータ */}>

      <MyContext.Consumer>
      {value => /* コンテクストの値に基づいて何かをレンダーします */}
      </MyContext.Consumer>

  • useContextの方法

    • プロバイダーは上と一緒
    • useContext(/* Context */)でOK
    • こっちのほうがわかりやすいー

まとめ

歴史を知ることがその技術がなぜ使われているのかを理解する手助けになりますね。
背景を知った上で使うのと知らないで使うのでは同じ技術を使うとしても判断の観点が変わってくると思います。
そして今の所,Contextで状態管理したらReduxは使わなくてもいいかなーという気持ちになってます。
規模が大きくなってきたらReduxを取り入れる形でも良いのかなと。

それではまた明日。