关于前端:Redux-DevToolsRedux调试工具reduxdevtoolsextension的使用介绍

44次阅读

共计 1068 个字符，预计需要花费 3 分钟才能阅读完成。

调试 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

更多配置和具体应用可参考官网。