LaunchCartな日々

LaunchCartとともに歩む日々を綴った
ブログです

React HooksによるFluxでタブを作るまで

テクニック

React HooksによるFluxでタブを作るまで

LaunchCartのフォームのUIを、将来的にチームで開発することも見据え、フレームワークを使って組んでみようと考えたとき、部分導入が可能で、ルールがしっかりしているReactを使うことに思い至りました。

はじめ何も考えずにReactを使ってUIを作ろうとして、意図した動作をさせることができなかったため、Reactにおけるデータの管理方法について調べた結果、Reactが公式に推奨しているFluxというアーキテクチャの存在を知りました。

Fluxはアプリケーションのデザインパターンの一つであるMVC(Model View Controller)パターンの派生としてFacebookが提唱したもので、よりデータの流れをシンプルにしたものです。

ただ、元々ReactではFluxでアプリケーションを組むためのライブラリなどは内蔵されておらず、自前で組むか、Reduxのような非公式のライブラリを導入する必要がありました。

Reduxによるアプリケーション開発が普及してきている状況で、React HooksというReact標準のライブラリが導入され、React標準でReduxライクな記述が可能になりました。

React Hooks自体は、クラスコンポーネントによる複雑な記述を脱して、関数コンポーネント中心でアプリケーション開発をできるようにするためのものです。

そのReactHooksの機能の中でも、useReducer、useContext、createContextを利用することでReduxライクなFluxによるアプリケーション開発が可能になります。

 

今回は、タブを組むことを目指し、React HooksによるFluxの組み方を実践してみました。

DEMO

 

Action

アクションタイプ

TabActionTypes.ts

アクションの生成関数

TabActions.ts

Reducerの登録とContextの生成、呼び出し

Reducer関数

TabReducer.ts

トップ階層のコンポーネントでのuseReducerによるReducerの登録と、state, dispatchの生成

App.tsx

下層コンポーネントでのContextを通じた、state、dispatchの呼び出し

App.tsx

dispatchの実行とstateの更新

App.tsx

stateの反映のみが必要で、アクションの生成を行わないコンポーネントでは、stateのみ呼び出し

App.tsx

実際にやってみた感想としては、しっかりとデータの設計をしておかないと組めないので、とてもプログラムを設計する勉強になりました。

今回はタブというシンプルなUIを例にしたので、ReactやFluxの恩恵は少ないですが、階層が深かったり複雑なデータを扱い様なUIを開発したり、チームでUIを組み合わせていくときに、この仕組はとても重宝するのではと感じました。

参考にさせていただいたサイト

Fluxとはなんなのか – Qiita

FluxによるReactアプリの状態管理 ReactHooks編 – Qiita

Replacing Redux with react hooks and context (part 1)

React & Flux入門 – Qiita

 

App.tsx 全文

Types.ts

index.tsx

この記事を書いた人
Ninomiyaのアイコン

Ninomiya

Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。