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

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

今日やったこと

• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reduxアプリケーション基礎編

Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 Reduxアプリケーション基礎編

ざっくりサマリー

• コンベンション = 習慣 → Reduxの書き方には決まった書き方がある

  • 覚えてしまえば他プロジェクトのコードリーディング,理解してもらいやすいコードの書き方ができる

• Action

  • Actionとは → オブジェクトでtypeというキーを持っている。値は一意(ユニーク)である必要がある
  • ActionCreator
  • Actionを返す関数
  • 再度使うやつはexportする

• Reducer

  • ActionのTypeに応じて状態をどう変化させるのかを定義する
  • すべてのReducerを一つにまとめて使う → combineReducers({まとめたいReducer})
  • 状態の初期値をオブジェクトで定義
  • reducer関数にはstateとactionを引数に取る

• Store

  • Store作成用の関数 → createStore
  • 作成したストアを全コンポーネントにわたす機能 → Provider
  • Providerコンポーネントにstore属性を与えてAppコンポーネントをラップすることで状態を全コンポーネントで共有できるようにする
• コンポーネントはコンポーネント用のディレクトリを切っておいたほうが見通しがいい

• stateとactionの紐付け

  • connect関数で紐付け
  • mapStateToProps → stateから必要 な情報を取り出しコンポーネントにマッピングする関数
  • mapDispatchToProps → アクションが発生した時にReducerにTypeに応じた状態遷移を実行させる関数

まとめ

Reduxわからなすぎる！！
昨日夜更しだったのもあって眠いから頭はたらいてない感じはあるけど,それにしてもわからない。
手動かしていくつかこなせばある程度理解できるようになるかな？
ひとまずこういうものかと受け入れて進んでみます。
一通り終わって戻ってきたら見える景色もあると信じて。

それではまた明日。