こんにちは、fluctの@nekoyaです。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションはReactとRxJSを軸として作られており、コードはTypeScriptを使って書いています。 アプリケーションを流れるデータと状態の管理について、Write StackとRead Stackという考え方を取り入れたところ、いろいろなメリットが得られたので、そのあたりを軸に掘り下げてみます。 全体の大まかな構成 各Stackの前に、まずはアプリケーション全体の構成をざっくりと見ておきます。 流れとしては、DispatcherからWrite Stack, Read Stackを通ってStateが生成され、それをViewが受け取るという構成になっています。 全体の流れとしてはFluxっぽい何かのひとつのあり方なのですが、
![React + RxJSで始める状態管理 - CARTA TECH BLOG](https://cdn-ak-scissors.b.st-hatena.com/image/square/5b8f3bb704a1f34ad264b29b6a1482c65984857c/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2F1f0fc626d93598860233e1edc511cc8c159065eb%2Fbackend%3Dimagemagick%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fgist.githubusercontent.com%252Fnekoya%252F47644d75a3d8735231bdde53f8338290%252Fraw%252Fb841998045469c60d3cbf55811bd72cfed3f45c5%252Fapplication_stack.png)