株式会社ユーザベースの技術チームブログです。ReactとReactHooksを使って、Flux的なアーキテクチャを実現する2019-11-01ReactとReactHooksを使って、Flux的なアーキテクチャを実現するTweetこんにちは。SPEEDA開発チームの冨田です。昨今のフロントエンドでは、Fluxというアーキテクチャが利用されることが多くなってきています。SPEEDAでもVueを使っている画面がありますが、そこではVuexというVue向けのFluxライブラリで状態管理をしています。Fluxではデータの流れを一方向にすることで見通しのよい設計が行えるようになります。今回は、素のReactを使ってデータの流れを単一方向にする設計を紹介します。今回作ってみるものTodoアプリを作ってみましょう。以下のようなことができる画面を作ります。今回はデータの永続化は考えないものとします(つまり、ウェブページを更新すると、全て消えてしまいます)。TypeScriptなプロジェクトを作っておくとよいでしょう。以下は、今回作成したプロジェクトになります。GettersとActionsをつくるTodoアプリを実現するためのカスタムフックを作りましょう。Gettersはコンポーネントからアクセスできるようにする(露出する)データの集まりです。Actionsはそれを呼び出すことで、なんらかの副作用を起こし、Gettersを更新する関数の集まりです(正確には、内部のStateを変更することで、Gettersが更新される)。これらはFluxで定義されているものと同様の概念だと考えていただいてよいでしょう。Actionsとして以下のものを定義しています。GettersとActionsをどこのコンポーネントからでもアクセスできるようにするuseContextを使います。useContextは、createContextにより、あらかじめ生成しておいたコンテキストにどこからでもアクセスできるようにするReactHooksです。propsに渡したオブジェクトがChildElementコンポーネント内のuseContextで得られます。);};上記の仕組みを利用して、GettersとActionsに対してどこからでもアクセスできるようにし、さらにGettersに変更が行われると、再レンダーされるようにします。createContextでコンテキストを作成します。anyとやってしまっていますが、Providerでvalueを提供しないときに初期値として得られるものなので、これでよいでしょう。StoreProviderコンポーネントは、Context.Providerをラップしたものです。コンテキストにuseTodoで生成したGettersとActionsを保存し、子コンポーネントをレンダリングします。ユーザーに、Contextやカスタムフックを意識させないための工夫です。useContextもReactのuseContextをラップしたものです。こちらも、Contextを意識させないために作っています。ここで定義したStoreProviderとuseContextを利用することで、画面のコンポーネントではカスタムフックについて意識することなく、useContextを呼ぶだけでなんか知らんけどGettersとActionsが使える、という状態になります。Todoを表示するコンポーネントを作るユーザーが入力しているdescriptionについてはこのコンポーネントで管理するようにしています。Actionsで管理してもよいのですが、useStateとの共存も示したかったので、今回はここに書きました。updateにアクセスできるようになりました。追加ボタンが押され、addが呼び出されることで、todosが更新され、再レンダリングが行われます。チェックボックスが変更されることで、updateが呼び出され、todosが更新され、再レンダリングが行われます。Getters(todos)は、画面をレンダリングするために必要なもの。update)は呼び出すことで、状態を変更し、再レンダリングを促すもの。データの流れが単一方向になっているのがわかるでしょうか。アプリコンポーネントを作る最後に、アプリコンポーネント(一番外側のコンポーネント)を作ります。2で作ったStoreProviderがここで登場します。3で作ったTodoComponentをStoreProviderで包むだけです。これにより、内部で状態が変化したときに、再レンダリングが走ります。Actionsのテストの書き方をご紹介します。ReactのカスタムフックはReactコンポーネント内でしか呼び出すことができません。テスト用のReactコンポーネント内でカスタムフックを呼び出し、呼び出した結果をテストすることになるでしょう。Actionsを取得することができます。Actionsを変数に保持しています。Specification内では得られたGetterやActionsのテストのみに注力しています。注意点としてはact内でActionsを呼び出せるのは1回で、何度も呼び出したい場合はactを何度も書く必要があることです。actを抜けると、状態がGetterに反映されるイメージです。テストケースは3つです。ひとつめはtodosの初期状態が空配列であること。ふたつめはaddすると、todosに要素がひとつ追加されること。みっつめは、addした要素に対しupdateをかけると、その要素のdoneの状態が、指定したとおりに変更されること。});});以上のように、素のReactだけでFlux的なアーキテクチャを実現することができました。よろしければ、ぜひお試しください。»プロフィール『経済情報で、世界を変える』をミッションに、企業・業界情報プラットフォーム「SPEEDA」やソーシャル経済ニュース「NewsPicks」、ABMを強力にサポートする「FORCAS」、スタートアップの情報収集を圧倒的効率化「entrepedia」などを提供する株式会社ユーザベースの技術チームブログです。多国通貨」をハンズオンしたら快適で楽しかったGo言語でオブジェクト指向プログラミングの基本(型編)月別アーカイブ検索@Uzabase_Techさんのツイートスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。