React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

React React Native Redux saga saga-en TypeScript フロントエンドエンジニア

Fluxアーキテクチャとは?初心者向けに解説!

0
0

 

 

 

この前Fluxの勉強をしてたら、とても勉強になる記事を見つけました。

 

英語の記事だったのですが、要点だけかいつまんで、こちらで僕なりに解釈を加えて、読者の皆様にシェアしたいと思います。

 

ただし、ReactやReduxをやったことのない人には、よく分からないかもしれません。

 

Reduxをやってる人で、データフローをより深く理解したい人は、とてもおすすめかなと思います!

 

もし詳しく読みたければ、本文の英語の記事も読んでみてください。

 

Fluxアーキテクチャとは?初心者向けに解説!

 

では、行ってみましょう。

 

Fluxは、FacebookがSPAを構築するために提案したアーキテクチャパターンです。

 

このパターンでは、アプリケーションを以下の部分に分割することを提案しています。

 

  • ストア
  • ディスパッチャー
  • ビュー
  • アクション/アクションクリエーター
  • ストア

Store

ストアは、状態を管理します。ドメインの状態とユーザーインターフェースの状態の両方を保存することができます。

 

ストアとステートは異なる概念で、ステートはデータの値です。

 

ストアは、メソッドを通じて状態を管理するビヘイビアオブジェクトです。

 

本の管理の場合:本のリストが状態で、BookStoreがそのリストを管理します。

 

ストアは複数のオブジェクトを管理し、それらの特定のオブジェクトに関して、単一の真実の情報源となります。

 

つまり、ストアの場所は一つであることが好ましく、プロジェクト全体で共有される保存庫みたいなものと考えることができます。

 

それで、アプリケーションには多くのストアが存在することになる、例えば BookStore、AuthorStore、UserStoreなどです。

 

ストアにはセッターメソッドはありません。アクションをディスパッチャに渡すことでのみ、状態の変更を要求することができます。

 

ストアはすべてのアクションをリッスンし、その中からどのアクションを行うかを決定します。

 

これは通常、switch文を意味します。ストアが状態の変更を行ったら、変更イベントを発行しますんで、ストアはイベントエミッターです。

 

そして何よりも、ストアは他のストアを依存関係にはありません。

 

Dispatcher

 

ディスパッチャーは、アクションをストアへ送信すできます。

 

つまり、登録されたイベントの、すべてのストアにブロードキャストする単一のオブジェクトです。

 

ストアは、アプリケーションの起動時にイベントを登録する必要があるわけですが、

 

ディスパッチャーは、アクションが入ってくると、登録されているすべてのストアにそのアクションを渡します。

 

View

 

ビューは、ユーザー・インターフェースのコンポーネントです。

 

ユーザーインターフェースのレンダリングと、ユーザーとのインタラクションの処理を行います。

 

ビューは、ツリー構造になっていまして、ストアの変更を監視し、再レンダリングを行うことができます。

 

ビューはさらに、プレゼンテーションビューとコンテナビューに分けられます。

 

プレゼンテーションビューは、ディスパッチャやストアに接続しません。

 

それらは自身のプロパティを通してのみ通信します、つまり、描画をメインに行うフロント部分と言えます。

 

コンテナビューは、ストアとディスパッチャに接続されていて、

 

コンテナビューはストアからのイベントを受け取り、プレゼンテーションコンポーネントにデータを提供します。

 

コンテナビューは、ストアのパブリックゲッターメソッドを使って新しいデータを取得し、そのデータをビューツリーに渡します。

 

つまり、ユーザーの操作に応じてアクションを実行します。

 

Actions

 

アクションとは、そのアクションを実行するために必要なすべての情報を含むプレーンなオブジェクトのことで、

 

どういう機能があるかを示す羅針盤の役割もあると言えます。

 

アクションには、アクションの種類を示すtypeプロパティがあるわけですが、

 

アクションオブジェクトはアプリケーションの中を動き回るので、不変的なものにすることをお勧めします。

 

アクションは様々な場所から発生するので、

 

ユーザーのインタラクションの結果として、ビューから来るかもしれませんし、

 

初期化コードのような他の場所から来るかもしれません。

 

Reactでは、Sagaのようなミドルウェアを使って、Web APIからデータが取得され、ビューを更新するために、

 

アクションが実行されるかもしれません。

 

さらに、アクションは、画面の更新を必要とするタイマーから来るかもしれません。

 

そういうことを意識しましょう。

 

Action Creators

 

ちなみに、アクションクリエーターというものは、コードをカプセル化して、関数の中にアクションを作成する方法があるんですが、

 

このようにアクションを生成・発信する関数をアクションクリエーターと呼びます。

 

しかし、最近ではReduxなどでもRedux Toolkitが出ていることで、アクションとアクションクリエーターは同じように意識することも多いです。

 

Web API コール

 

ユーザーインターフェイスを更新するために Web API 呼び出しを行う場合、

 

Web API 呼び出しの後にストアを更新するアクションが行われます。

 

ストアが更新されると、通常イベントが発行され、そのイベントをリッスンするビューが再レンダリングされます。

 

Web API の呼び出しは、アクションが発動されることで呼び出されます。

 

一方向性のデータフロー

 

とても重要な概念としては、更新情報が一方向に流れることです。

 

 

ビューは、受け取ったデータを表示するだけで、変更しません。

 

データの変更を監視し、新しい値を持つのはアクションが作成しますが、アクションはデータの更新は行いません。

 

ストア、ビュー、その他のアクションは、(他の)ストアの状態を直接変更することはできません。

 

ストアへの変更は必ず、ディスパッチャーを通してアクションを送らなければなりません。

 

ストアの読み取りは書き込みよりもデータフローが短くなります。

 

ストアの書き込みにおけるデータフローは、非同期アクションと同期アクションで異なります。

 

同期アクションで書き込み

 

 

非同期アクションで書き込みを

 

 

Fluxの長所

 

Fluxアーキテクチャは、

 

ビューがドメインストアに直接マッピングされないアプリケーションにおいて優れています。

 

別の言い方をすると、ビューが多くのストアを更新するアクションを作成し、

 

ストアが多くのビューを更新する変更を引き起こすことができる場合です。

 

Fluxの短所

 

Fluxは、各ビューが1つのストアにマッピングされるアプリケーションに、不必要な複雑さを加える可能性があります。

 

この種のアプリケーションでは、ビューとストアを分離するだけで十分だと思う。

 

例えば、Reactで3層構造のアプリケーションを作る方法を、よければ見てみてください。

 

 

結論

 

ストアは状態を管理し、アクションを聞くことでのみ状態を変更します。

 

そして、ストアはビューに更新を通知します。

 

ビューは、ユーザー インターフェイスをレンダリングし、ユーザーとの対話を処理します。

 

コンテナビューはストアの変更を待ちます。

 

ディスパッチャーは、登録されているすべてのストアにアクションをブロードキャストします。

 

アクションはプレーンオブジェクトです。

Pocket
LinkedIn にシェア

りょすけ
毎月3万人以上のプログラマーが訪れるoff.tokyoで、プログラマーさん向けのアンケートを実施しています、アンケートに無料回答すると、他の人の投票も見ることが出来ます!

学びたいプログラミング言語は何ですか?

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

 vaaaval@gmail.com



  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-React, React Native, Redux, saga, saga-en, TypeScript, フロントエンドエンジニア

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.