Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。
Reduxについて
色々解説してくれてますので、それを参考にしてください。
https://qiita.com/kiita312/items/49a1f03445b19cf407b7
ようはUIの状態を管理するフレームワークだそうです。
Redux Devtools Extensionについて
Reduxアプリの開発ツールの一つで、
ブラウザの拡張機能からReduxの状態管理を可視化してくれます。
chromeやfirefoxで使えるようです。
デモ
何がいいのか？
1. デバッグが便利
どのアクションでどの状態になり、どんな値を持つのか一発でわかります。
状態遷移後の値の差分もみれたりします。
2. テストでも活躍するかも
テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があります。
このツールを使うと、状態遷移をリプレイしたり、エクスポート/インポートできます。
テスターが自分が実行した状態遷移データを、開発者に渡して、開発者側でそのエラーを再現して確認することができます。
インストール
Chromeだったら、[Chrome Web Store] (https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd) でインストールできます。
詳しくは以下で、
https://github.com/zalmoxisus/redux-devtools-extension
使ってみる
Reduxのサンプルで用意されている、Todoアプリにセットアップしてみましょう。
Todoサンプルを用意
git clone https://github.com/reactjs/redux.git
cd redux/examples/todos
npm install
npm start
ブラウザで localhost:3000 にアクセスするとTodoアプリが起動します。
セットアップ
/src/index.js をちょっと編集するだけでいけます。
import React from 'react'
import { render } from 'react-dom'
import { createStore, compose } from 'redux'
import { Provider } from 'react-redux'
import App from './components/App'
import reducer from './reducers'
const store = createStore(
reducer,
compose(
process.env.NODE_ENV === 'development' && window.devToolsExtension ? window.devToolsExtension() : f => f
)
)
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
確認してみる
Todoアプリを開いている状態で開発者ツールを開いて Redux を選択すると、見れます。
使ってみた感想
Redux Devtools Extensionを導入したことで、データの流れが追いやすくなり、
開発効率が上がった気がします。
テスト時にも導入することで、もしかしたらバグの原因の早期発見につながるかもしれないので、機会があれば使ってみたいです。