TSLab【第6回 React勉強会】Fluxフロー×Redux

Redux
  • URLをコピーしました!
目次

はじめに

私が運営しているTSLabの第6回・React勉強会の実施ログとなります。

第6回のテーマは【Fluxフロー×Redux】

今回もReactおじさん(Twitter)に講師をして頂きました!

本当にありがとうございます!


前回の勉強会内容が気になる方は下記の記事も合わせてご覧くださいませ。

実施内容

今回の勉強会ではReduxの設計のコアにあたるFluxフローについてお話を頂きました。

下記ドキュメントに詳しく記載がされているので、当記事では簡単なサマリーのみ記載をさせて頂きます。

※2022年6月時点の情報となります。

サンプルソースはこちらになります。

サマリー

ローカルステート / グローバルステート

まずは前提となるグローバルステートとは何ぞや?について触れて頂きました。

こちらは前回の勉強会(下記の記事) で触れて頂いたので復習となりますが、共通のStateからどのコンポーネントでもデータを呼び出せる方法についての振り返り。

こちらはReduxというより状態管理ライブラリの前提知識となります。

Fluxとは

ReduxのアーキテクチャのベースになっているFluxアーキテクチャについて触れて頂きました。

下記の役割や具体的に何をやっているかをご説明頂いています。

(多分触らないと理解できないと思います。笑)

  • View
  • Action
  • Dispatcher
  • Store
  • Reducer
  • Selector 

今回の一番の肝が下記に詳しくまとまっているので是非ご覧ください。

Reduxの処理フロー

下記の流れを実際のコードと照らし合わせてご説明いただきました。

  1. Viewからアクションを発火
  2. Actionにpayloadを渡す
  3. DispatcherにActionを渡す
  4. Actionのtypeに応じてReducerがStateを更新
  5. Stateの更新をViewに反映

これは触らないとわからないので写経して体に染み込ませましょう!(笑)

さいごに

React勉強会シリーズ第6弾終了!

実際に自分で書いてみると理解できるのですが、概念だけ説明しようとすると難しいですね!笑

Reduxは既存のアプリで割と組み込まれがちなので、完璧に理解はできなくても、読めて処理が理解できるくらいにはなっておいた方が良いと思います。

是非ご自身でも写経して体に染み込ませてください!笑

以上。簡単なまとめになります!

Redux

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次