调试 redux 代码的工具,官网举荐的是 redux-devtools-extension,装置好了之后,咱们还须要在代码中配置一下才能够在浏览器中调试代码。
一,咱们装置 redux 调试工具,是在 Chrome 中去装置的,自行装置
关上谷歌网上利用店:搜寻 redux,装置第一个即可
二,在代码中创立 store 的时候去判断 window.devToolsExtension 函数是否存在
更多配置可参考:官网链接
To specify extension’s options, use it like so:
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...}) : compose;
const enhancer = composeEnhancers(applyMiddleware(...middleware),
// other store enhancers if any
);
const store = createStore(reducer, enhancer);
引入 compose,并应用 compose 联合 thunk 和 window.devToolsExtension 联合起来:
store/index.js
import reducers from './reducers';
import thunk from 'redux-thunk';
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(thunk),
);
const store = createStore(reducers, enhancer);
export default store;
配置好后,咱们在 Chrome 的调试窗的 redux 选项卡中能够实时看到 state
更多配置和具体应用可参考官网。