BlazorでもReduxDevToolsで状態遷移をデバッグできるようにした

はじめに

Blazorはまだ歴史も浅く，まだ広く普及されておらず，
サードパーティ製のツールもReactやVueほど充実していません．

以前の記事で状態管理ライブラリを作成したことを紹介しましたが，本記事はそれを利用することでReactのようにReduxDevToolsを利用するという内容になります．

Redux DevTools は、アプリケーションの状態遷移をデバッグするためのツールです。状態のタイムトラベルできたり、状態の遷移履歴を可視化したりできます。
うまく使えばかなり強力なツールになるんじゃないでしょうか．

前提として前回の記事で紹介した状態管理ライブラリと作成したStoreを利用します

前回の記事

ReduxDevTools Middlewareのドキュメント

こちら

インストール

ReduxDevToolsと状態管理ライブラリのMiddlewareをインストールしましょう

ブラウザにReduxDevTools拡張をインストール

Chrome

Edge

FireFox

ReduxDevToolsの公式リポジトリ

Middlewareをプロジェクトにインストール

dotnet add package Memento.ReduxDevTool.Browser

MiddlewareをDIコンテナに登録

#if DEBUGを忘れずにつけましょう．
でなければプロダクション環境でもReduxDevToolsが使えてしまいます．
オプションはReduxDevToolsとほぼ同じですが，ドキュメントを参照してください．

#if DEBUG
builder.Services.AddBrowserReduxDevToolMiddleware(new() {
    StackTraceEnabled = true,
    OpenDevTool = true,
    ...
});
#endif

ReduxDevToolsを起動

あとはReactのReduxDevToolsの場合と使い方は同様です．
F12で開発ツールを開いて，Reduxタブを開けば利用できます．

アプリケーションに存在するすべてのStoreのStateが１つのState Treeとして表現されています．
状態を戻したり状態の遷移を可視化することができるようになります

詳しい使い方はReduxDevToolsの公式をみるか，
ReactとReduxDevToolsとほぼ同じ使い方ができるので触ってるうちにわかると思います．

終わりに

いかがだったでしょうか．
Blazorはまだまだ発展途上な部分も多いので必要なものは自作するしかなかったりしますよね．
こういう活動で少しでもBlazorコミュニティに貢献できればと思います！