Redux DevTools

發表於 分類於

在 React 章節初期，就有介紹過 React Developer Tools 這著個 Chrome Extension 來提高開發效率，在 Redux 也有另一個 Chrome Extension - Redux DevTools 協助開發

同樣地，只要在 Chrome Extension Store 就可以直接下載這個 Chrome Extension

開啟 React 專案後，打開 DevTools，就會看到以下畫面

其中左側代表的操作過程中所執行的 Reducer Function，只要把游標指到上方，就會出現 Jump & Skip 的按紐，點選 Jump 就會將畫面跳到該步驟，並在右方顯示這步驟所操作的 state;反之點選 Skip 就會跳過該步驟

其實整個 UI 設計的相當直覺，即使是第一次使用只要隨意點選就可以很容易上手相關功能

資料參考

React - The Complete Guide (Incl Hooks, React Router, Redux)
Redux DevTools