Redux 開発で絶対使うべき Redux DevTools Extension 解説

**[Redux DevTools Extension](https://github.com/zalmoxisus/redux-devtools-extension)** について解説します。

改めて探してみるとこれに関する日本語の記事が出てこなくて驚きました。これがないと redux 開発には苦労すると思います。


リポジトリ: https://github.com/zalmoxisus/redux-devtools-extension

※ [redux-devtools](https://github.com/gaearon/redux-devtools) とは異なるので気をつけて下さい。Chrome Extensions の方を紹介します。

# サンプルコード
実際に触ってみたい人は早速 [Extension](https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
) をインストールし、[公式のDEMOページ](http://zalmoxisus.github.io/examples/todomvc/)を開いてみて下さい。Chrome Developer tools に Redux タブが増えます。

http://zalmoxisus.github.io/examples/todomvc/

* ローカルでいじりたい場合(https://github.com/zalmoxisus/redux-devtools-extension/tree/master/examples/todomvc)

```zsh
$ git clone --depth=1 git@github.com:zalmoxisus/redux-devtools-extension.git
$ cd redux-devtools-extension/examples/todomvc
$ yarn
$ yarn start
$ open http://localhost:4002
```



# Inspector
まずは中央の Inspector パネルについて見ていきます。アクションが発火するとログが更新されていきます。
![reduxdevtool1.gif](https://qiita-image-store.s3.amazonaws.com/0/40717/ca4f0255-5561-10b9-630e-661a533990b7.gif)


## それぞれ Action を覗いてみる

![Redux_TodoMVC_example.png](https://qiita-image-store.s3.amazonaws.com/0/40717/e0893880-a79a-2d55-34a5-6fa5a657815c.png)

1つめのTODO "Use Redux" を "Use Redux Devtool" に書き換えてみました。そこで発行された EDIT_TODO アクションを例として見てみましょう。



### Action
そのアクションの引数に何が渡されたのかを見ることが出来ます。変更した TODO の id は 0 で変更後の text は "Use Redux Devtool" でした。
![Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png](https://qiita-image-store.s3.amazonaws.com/0/40717/4bbe6c80-b702-92a6-3341-7c41dff512c4.png "Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png")



### State
Action 後の State 全体を見ることが出来ます。 id:0 の todoのtext は "Use Redux DevTool" に変わっています。
![Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png](https://qiita-image-store.s3.amazonaws.com/0/40717/29ab3d35-350f-60b8-9f74-c9cf6de7a821.png "Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png")






### Diff

そのアクション前後の State の Diff が見れます。
![Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png](https://qiita-image-store.s3.amazonaws.com/0/40717/3a4f546c-74f4-c7e9-59c8-414820d45101.png "Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png")



### Test

test のサンプルコードを生成されます。ここからここまでの Action というふうに複数生成もできます。
ただし Action が関数でなく json のまま生成されるので微妙かもしれません(ただし template はカスタマイズが出来ます)。

State タブで Raw(json) 表示ができるので、テストではそちらも使えます。


![Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png](https://qiita-image-store.s3.amazonaws.com/0/40717/87b4fa42-6436-0ac8-2f13-7b0993fd4887.png "Developer_Tools_-_http___localhost_4002__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png")


# Jump

任意の Action の Jump ボタンを押すか下にあるスライダーを動かすことで、そのタイミングの状態に戻ることが出来ます。

![Developer_Tools_-_http___localhost_4002_.png](https://qiita-image-store.s3.amazonaws.com/0/40717/d939b6f2-3c85-6490-619e-f627b438e5ce.png "Developer_Tools_-_http___localhost_4002_.png")



# その他フッターアクション


![Developer_Tools_-_http___localhost_4002__and_zalmoxisus_redux-devtools-extension__Redux_DevTools_extension__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png](https://qiita-image-store.s3.amazonaws.com/0/40717/cd09ef4d-8335-6017-413f-ee00b53957ca.png "Developer_Tools_-_http___localhost_4002__and_zalmoxisus_redux-devtools-extension__Redux_DevTools_extension__and_Redux_DevTools_Extension_を使ってない_Redux_開発者なんているの？.png")

### Pause recording ⇔ Start recording

このツールでのロギングの有効/無効を切り替えます。

### Lock changes ⇔ Unlock changes

State をロック(変更させない状態に)できます。


### Persist

わかってないです。
[redux-persist](https://github.com/rt2zz/redux-persist) 関係だと思うけど、redux-persist 入れてるアプリケーションでも動かず使えていないです。設定ドキュメントも見つかってないです。

### Dispatcher

Action を選んで発行できます。Form の UI になっています。
![Fullscreen_2017_11_23_14_29.png](https://qiita-image-store.s3.amazonaws.com/0/40717/95595a51-ba04-1d12-8416-b963a432fca6.png "Fullscreen_2017_11_23_14_29.png")
![Developer_Tools_-_http___localhost_4002__and_Tomato_One.png](https://qiita-image-store.s3.amazonaws.com/0/40717/e6bfbf0e-ced0-bde2-c412-5695373e49f7.png "Developer_Tools_-_http___localhost_4002__and_Tomato_One.png")


### Slider
Slider の表示/非表示切り替え。

### Import, Export

このツールで記録した内容を保存、復元できます。State のみを保存するものではありません。payload (actionのログ) と preloadedState (initial state) を持つ json が出力されます。

### Remote

React Native 向けの [remote-redux-devtools](https://github.com/zalmoxisus/remote-redux-devtools) を開きます。


# おわり
Chart や Log Monitor など他にも機能はあるのですが自分が活用しているのはこのへんです。
「Redux devtools のほんとうに大事な機能はこっちだ!」や「Redux 開発にはこっちのツールのが便利だよ」などあれば教えていただけるととても嬉しいです。[Twitter @elzup](https://twitter.com/_elzup_) メンションでもいいのでなんでも意見下さい。