Reduxのstoreの中を確認する

はじめに

この投稿はReact・Reduxを趣味で勉強している私が、reduxのstoreの中身を確認する方法を、勉強しながら書いた内容です。
私は業務でreactをやった経験とかもない素人ですので、あまり参考にしないでください。
ですが、内容が間違っていたとしてもQiita様だとコメントで指摘が入って、そうなればみんなに正しい知識として広まると思い、勉強中ですが投稿させていただきました。よろしくお願いいたします。

storeの中身を見る対象

http://redux.js.org/docs/basics/ExampleTodoList.html
reduxの公式サイトに乗っている「Todo List」がシンプルでいいのと思ったので、これのstoreを見ていきます。

git cloneで簡単に環境が作れる！
http://redux.js.org/docs/introduction/Examples.html

git clone https://github.com/reactjs/redux.git

cd redux/examples/todos
npm install
npm start

open http://localhost:3000/

動作はこんな感じです。

store.getState()を使う

Todo Listのsrc/index.jsに以下のように3行追加するだけでdispatchの度に値を見ることができる。

    import React from 'react'
    import { render } from 'react-dom'
    import { createStore } from 'redux'
    import { Provider } from 'react-redux'
    import App from './components/App'
    import reducer from './reducers'

    const store = createStore(reducer)

+   store.subscribe(() =>
+       console.log(store.getState())
+   )

    render(
       <Provider store={store}>
           <App />
       </Provider>,
    document.getElementById('root')
    )

公式のAPI Referenceを見ると、

getState()

http://redux.js.org/docs/api/Store.html#getState
↓
アプリケーションの現在の状態ツリーを返します。
これは、店舗のレデューサーによって返された最後の値と同じです。

現在のstateを取得できるメソッドみたいですね。

subscribe(listener)

http://redux.js.org/docs/api/Store.html#subscribe
↓
アクションがディスパッチされるといつでも呼び出され、状態ツリーの一部が変更されている可能性があります。
getState()をコールして、コールバック内の現在の状態ツリーを読み取ることができます。

この方法が3行書くだけですので、一番楽な方法だと思います。

Redux DevTools

https://github.com/gaearon/redux-devtools
すごい便利そうな機能が沢山ある！

Chromeの拡張の方ががすごく楽に使えそうなので、そっちでやってみました。

Redux DevTools Extension

Chromeの拡張としてRedux DevToolsを使えるみたいです。
以下のように開発者ツールにReduxのタブができます。

ただそのままではまだ使えないので、
the instructions.と書いてあるリンクをクリックし、
https://github.com/zalmoxisus/redux-devtools-extension#usage
ここに書いてある通り、コードに1行追加する。

  import React from 'react'
  import { render } from 'react-dom'
  import { createStore } from 'redux'
  import { Provider } from 'react-redux'
  import App from './components/App'
  import reducer from './reducers'

- const store = createStore(reducer)
+ const store = createStore(
+   reducer, /* preloadedState, */
+   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+ );

  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  )

これでかっこいいデザインでstoreやactionを確認できます。

最後まで読んでいただき、ありがとうございました。m(_ _)m
頑張ってRedux勉強していきます。