Web開発ログ | エンジニアに役立つ情報 | 開発の中での気づきを発信

高卒Devlog

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

thumbnail

こんにちは! RYOTAです!

当記事をご覧くださりありがとうございます!

当記事はTSLab・React定例会のレポート記事になります!

はじめに

私が運営しているTSLabの第6回・React勉強会の実施ログとなります。
第6回のテーマは【Fluxフロー×Redux】
今回もReactおじさんに講師をして頂きました!
@react_nextjs Twitter
本当にありがとうございます!

実施内容

今回の勉強会ではReduxの設計のコアにあたるFluxフローについてお話を頂きました。
下記ドキュメントに詳しく記載がされているので、当記事では簡単なサマリーのみ記載をさせて頂きます。
※2022年6月時点の情報となります。
https://github.com/shogo4131/react-state-management/blob/main/doc/%E7%AC%AC6%E5%9B%9EFlux%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A8Redux/doc.md
サンプルソースはこちらになります。
https://github.com/shogo4131/react-state-management/tree/feature/redux-study/src

サマリー

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

まずは前提となるグローバルステートとは何ぞや?について触れて頂きました。
こちらは前回の勉強会(下記の記事) で触れて頂いたので復習となりますが、共通のStateからどのコンポーネントでもデータを呼び出せる方法についての振り返り。
こちらはReduxというより状態管理ライブラリの前提知識となります。

Fluxとは

ReduxのアーキテクチャのベースになっているFluxアーキテクチャについて触れて頂きました。
下記の役割や具体的に何をやっているかをご説明頂いています。
(多分触らないと理解できないと思います。笑)

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

今回の一番の肝が下記に詳しくまとまっているので是非ご覧ください。
https://github.com/shogo4131/react-state-management/blob/main/doc/%E7%AC%AC6%E5%9B%9EFlux%E3%83%95%E3%83%AD%E3%83%BC%E3%81%A8Redux/doc.md#flux%E3%81%AE%E3%83%87%E3%83%BC%E3%82%BF%E3%83%95%E3%83%AD%E3%83%BC

Reduxの処理フロー

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

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

これは触らないとわからないので写経して体に染み込ませましょう!(笑)
https://github.com/shogo4131/react-state-management/tree/feature/redux-study/src

さいごに

React勉強会シリーズ第6弾終了!
実際に自分で書いてみると理解できるのですが、概念だけ説明しようとすると難しいですね!笑
Reduxは既存のアプリで割と組み込まれがちなので、完璧に理解はできなくても、読めて処理が理解できるくらいにはなっておいた方が良いと思います。
是非ご自身でも写経して体に染み込ませてください!笑
以上。簡単なまとめになります!