ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Reactが流行っていますが、より大きなソフトウェアを開発する場合には単にReactを使うだけでなく、Fluxと言われるアーキテクチャで構築するのが推奨されています。ReduxというのもFluxの一実装です。

そんなReduxが提供する開発ツールをさらに拡張し、状態の変化を見える化してくれるのがRedux DevTools – Diff Monitorです。

Redux DevTools – Diff Monitorの使い方

Redux DevTools – Diff Monitorを実行すると以下のように右側にDiff Monitorが表示されます。

そして状態が変化すると自動的にその差分が表示されます。

JSONフォーマットで内容の確認ができます。

データの追加も同じように分かります。

ロールバックするとステータスを戻すこともできます。

Reactにとってデータの状態は肝とも言える技術です。それをビジュアル化することでRedux DevTools – Diff Monitorは開発効率が大幅に向上するのではないでしょうか。

Redux DevTools – Diff MonitorはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Redux TodoMVC

whetstone/redux-devtools-diff-monitor

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2