redux状态跟踪使用redux-devtools-extension插件的方法

[jackieli123723]

react项目的根目录中使用状态跟踪永凯调试bug

//way1 原始版本没有加入redux跟踪

// import React, { Component } from 'react';
// import { createStore} from 'redux'
// import { Provider } from 'react-redux'
// import {BrowserRouter } from 'react-router-dom';
// import { Router, Route, } from 'react-router'

// import reducers from '../reducers/index.js'
// import  App from '../components/App.js'
// import  Home from '../components/Home.js'
// import  Foo from '../components/Foo.js'
// import  Bar  from '../components/Bar.js'

// const store = createStore(reducers);

// export default class RouterIndex extends Component {
//   render() {
//     return ( 
//         <Provider store={store}>
//           <BrowserRouter>
//             <App path="/App" component={App}>
//               <Route path="/App/home" component={Home} />
//               <Route path="/App/foo" component={Foo} />
//               <Route path="/App/bar" component={Bar} />
//             </App>
//           </BrowserRouter>
//         </Provider>
//     )
//   }
// }

//way2
//配合redux-devtools-extension 调试的版本
//地址https://github.com/zalmoxisus/redux-devtools-extension

import React, { Component } from 'react';
// import { createStore} from 'redux'

//增加
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

import { Provider } from 'react-redux'
import {BrowserRouter } from 'react-router-dom';
import { Router, Route, } from 'react-router'

import reducers from '../reducers/index.js'
//thunk
//import { thunk } from 'redux-thunk';

import  App from '../components/App.js'
import  Home from '../components/Home.js'
import  Foo from '../components/Foo.js'
import  Bar  from '../components/Bar.js'

//const store = createStore(reducers);

//没chunk的使用
// const store = createStore(reducers, composeWithDevTools(

//   // applyMiddleware(...middleware),
//   // applyMiddleware(thunk)
//   // other store enhancers if any
// ));

let store;
if(!(window.__REDUX_DEVTOOLS_EXTENSION__ || window.__REDUX_DEVTOOLS_EXTENSION__)){ //没有安装状态管理追踪
    store = createStore(reducers);
}else{
    store = createStore(reducers, composeWithDevTools());////插件调试，未安装会报错
}

export default class RouterIndex extends Component {
  render() {
    return ( 
        <Provider store={store}>
          <BrowserRouter>
            <App path="/App" component={App}>
              <Route path="/App/home" component={Home} />
              <Route path="/App/foo" component={Foo} />
              <Route path="/App/bar" component={Bar} />
            </App>
          </BrowserRouter>
        </Provider>
    )
  }
}

//bug:

// Failed to compile
// ./src/routers/index.js
//   Line 58:  'reducer' is not defined     no-undef
//   Line 59:  'middleware' is not defined  no-undef

// Search for the keywords to learn more about each error.

//解决办法注释上面代码
 // applyMiddleware(...middleware),