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

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

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

PS：将来的你，肯定会感激明天拼命致力的本人！