💽

BlazorでもReduxDevToolsでデバッグできるようにしてみた

2023/08/08に公開

はじめに

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

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

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

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

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

dotnet add package Memento.ReduxDevTool.Browser

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

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

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

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

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

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