乐趣区

关于前端: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:将来的你,肯定会感激明天拼命致力的本人!
退出移动版