JavaScript
reactjs
React
redux

Redux Devtools Extensionを使った時のこの感動を伝えたい

Reduxというものを知って、さらにこのツールに出会った時に感動したので、ぜひ伝えたいと思います。

Reduxについて

色々解説してくれてますので、それを参考にしてください。

https://qiita.com/kiita312/items/49a1f03445b19cf407b7

ようはUIの状態を管理するフレームワークだそうです。

Redux Devtools Extensionについて

Reduxアプリの開発ツールの一つで、
ブラウザの拡張機能からReduxの状態管理を可視化してくれます。

https://github.com/zalmoxisus/redux-devtools-extension

chromeやfirefoxで使えるようです。

デモ

redux.mov.gif

何がいいのか?

1. デバッグが便利

どのアクションでどの状態になり、どんな値を持つのか一発でわかります。
状態遷移後の値の差分もみれたりします。

2. テストでも活躍するかも

テスト時にバグを発見した場合、そのバグを開発者側で再現したい時があります。

このツールを使うと、状態遷移をリプレイしたり、エクスポート/インポートできます。

テスターが自分が実行した状態遷移データを、開発者に渡して、開発者側でそのエラーを再現して確認することができます。

インストール

Chromeだったら、Chrome Web Store でインストールできます。

詳しくは以下で、
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 をちょっと編集するだけでいけます。

/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を導入したことで、データの流れが追いやすくなり、
開発効率が上がった気がします。

テスト時にも導入することで、もしかしたらバグの原因の早期発見につながるかもしれないので、機会があれば使ってみたいです。