Redux DevTools

Redux DevTools，簡單來說就是一個監控Redux的工具，可以透過它去追蹤你的Action跟state，有助於找出問題點。
點這裡安裝

/* eslint-disable no-underscore-dangle */
const store = createStore(
reducer, /* preloadedState, */
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(),
);
/* eslint-enable */

如果你還沒有使用middleware(中介軟體)的話，上面這一段code就可以了。
到這裡就可以開啟你的測試環境然後打開chrome的開發者工具，就可以看到裡面多了一個Redux的選項，這裡就是監控你的Action跟state的地方，可以在這裡看到他們的變化。

就是這麼簡單。

Get Chris’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

如果準備要加入中介軟體了，那上面那段code就可以改成

// 將 saga middleware mount 在 Store 上
// applyMiddleware的()裡放你的中介軟體
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
applyMiddleware(sagaMiddleware),
));