はじめに
この投稿は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勉強していきます。