React Redux无法读取未定义的属性“ dispatch”

men*_*ene 5 javascript reactjs redux redux-saga react-redux

我对应用程序的软件包做了一些更新,例如:

"react-redux": "^5.0.6" => "^6.0.1",
"redux": "^3.7.2" => "^4.0.1",
"redux-saga": "^0.16.0" => "^1.0.1"
Run Code Online (Sandbox Code Playgroud)

但我得到了错误

无法读取未定义的属性“ dispatch”

这是我的index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import { Provider } from 'react-redux';
import { Route } from 'react-router-dom';
import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
import createHistory from 'history/createHashHistory';
import { writeSaga } from './sagas/writeSaga';
import { readSaga } from './sagas/readSaga';

import App from './App';
import reducers from './reducers';

const history = createHistory();
const sagaMiddleware = createSagaMiddleware();
const middlewares = [routerMiddleware(history), thunk, sagaMiddleware];
const store = createStore(reducers, applyMiddleware(...middlewares));

export default function*  rootSaga() {
  yield [
    writeSaga(),
    readSaga(),
  ]
};
sagaMiddleware.run(rootSaga);

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route path="/" component={App} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-container')
);
Run Code Online (Sandbox Code Playgroud)

在这里,我得到了错误(react-router-redux ConnectedRouter.js): 调试器

有什么建议么?

更新1 添加/删除软件包,我知道导致该问题的软件包是“ react-redux”的升级(5.0.6 => 6.0.1)

更新2 看着react-redux的重大更改,我能够理解问题出在我如何通过存储(重大更改)。

我将代码更改为:

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history} store={store}>
      <Route path="/" component={App} store={store} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-container')
);
Run Code Online (Sandbox Code Playgroud)

而且有效!

但是我知道这不是正确的方法……也许对于正确的解决方案可能会有用。

为什么这不是另一个问题的重复:我使用相同的索引配置,检查了一下,并且确定使用的是react-router-redux。在我导出的每个页面中,

export default connect(mapDispatchToProps)(Home);
Run Code Online (Sandbox Code Playgroud)

OrA*_*yag 0

更改自:

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route path="/" component={App} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-container')
);
Run Code Online (Sandbox Code Playgroud)

到:

ReactDOM.render(
  <Provider>
    <ConnectedRouter history={history} store={store}>
      <Route path="/" component={App} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app-container')
);
Run Code Online (Sandbox Code Playgroud)