Day28-介绍 Redux DevTools

这篇要介绍的是 Redux DevTools，是一个可以纪录及操作存在 Redux store 内的 state 以及 dispatch action 的工具，更方便的 Debug。

安装完这个扩充套件後，可以从开发人员工具的 Redux 页签或是直接点击 Redux DevTools 的 icon 都能顺利的开启 Redux DevTools 的介面。

这篇的范例延续使用上一篇的范例。

State 页签

在 State 页签的部分，可以看到存在 Store 里面的所有 state，当我们从网页上去操作 counter 元件，在 Redux DevTools 里记录的 state 也会随之变化，并且每次更新 state 都会在最左侧栏留下一次纪录，可以随时点击纪录回到当时的 state 值。

并且这个页面底下有一个播放的进度条，点击播放时可以将左侧栏更新 state 的过程重新拨放一次，如果要隐藏进度条点击最下方整排按钮中的时钟按钮即可。

除此之外，还有三种呈现 state 的方式，可以依照个人需求选择。

Diff 页签

Diff 页签可以看见修改前後的 state 值。

Action 页签

这个页签会呈现出目前触发的 action，如果有 payload 也会一起出现，一样有 Tree、Chart、Raw 三种图形可以选择。

点击最下排按钮的键盘按钮，还可以自己 dispatch action，可以自订 payload 的值。

Test 页签

点开它会出现测试的程序码。

Inspector / Log monitor / Chart

在整个 React DevTools 的上面区块有个 Inspector 的文字，点击之後有三个模式可以切换，去呈现不同的更新 state 纪录。

• Log monitor 会呈现出完整的 state 和 actions
• Chart 会呈现树状图

底下按钮栏介绍

1. Pause/Start 按钮: 点击暂停後不会在左侧栏纪录 state 的变化，但网页上的 state 依旧会随 actions 去更新。
2. Lock 按钮: 这个按钮会将网页的所有 actions 全部冻结，state 都禁止更新。
3. Persist 按钮(图钉): 会将 state 记录起来，网页重新整理後出现整理前的 state。
4. 上传和下载按钮: 可以上传和下载包含 state 的 JSON 档。
5. 电台按钮: 会跳出一个独立的 React DevTools 视窗。

参考资料

Redux Devtools for Dummies