株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

React + Flux の概念について個人的にまとめました。

2016.5.26

CATEGORY - web

最近、React + FLUX を使うことがあったので、個人的な認識をまとめるために、概念についてまとめてみました。

React Flux

React + FLUX の流れ

特にFLUXについてはもっと複雑な絵がググると出て来るのですが、完結にするとこんな感じになるかと。

React Flux

VIEW(Component)

いわゆるViewです。
この中で、動的に書きかわる部分をReact.jsを使ってそれぞれのコンポーネント(1機能って感じ?)を作る感じです。

Action

いわるゆActionです。
簡単に言うと、Clickイベントとかそういうやつ。
Action は それぞれが Object として存在してて、
例):

{
actionType : COUNT_UP,
data : data
}

って感じになってます。
それぞれのイベントによって指定された actionType の data を Dispatcher に送る感じになります。

Dispatcher

Action から data を受け取って、callback を実行します。

Store

 データの格納庫って感じです。
Dispatcher によって更新された data を元に、View を書き換えます。

感想

実際使ってみて、1コンポーネントだけだと、確かに使いやすいかなーといった感じです。
ただ、コンポーネントが複数あって、それぞれが1つのActionで書きかわるような感じになると、急に複雑になりそうな印象です。
そこは、ちょっとこれからやってみないとわからないですね。。。
そのうち、実際作ってみたアプリ公開します。

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP