React Redux Cannot read property 'dispatch' of undefined

Question

I did some updates to my app's packages like:

"react-redux": "^5.0.6" => "^6.0.1",
"redux": "^3.7.2" => "^4.0.1",
"redux-saga": "^0.16.0" => "^1.0.1"

but I get the error

Cannot read property 'dispatch' of undefined

This is my 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')
);

Here I get the error (react-router-redux ConnectedRouter.js):

Any suggestions?

UPDATE 1 Adding/removing packages, I understood that the package that causes that issue is the upgrade of "react-redux" (5.0.6 => 6.0.1)

UPDATE 2 Watching the breaking changes of react-redux, I was able to understood that the problem was how I pass the store (breaking changes).

I changed my code to:

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

And it works!

But I know it isn't the correct way... maybe it can be useful for the right solution.

Why this isn't a duplicate of the other question: I have the same config to index, I checked it and I'm sure that I'm using react-router-redux. In every page I export like

export default connect(mapDispatchToProps)(Home);

Strapless

github.com/reactjs/react-router-redux/issues/609 – Multiversity

@Daviti I don't use Apollo and isn't a good option introduce it now because I'm developing a big program – Strapless

why use both redux-thunk and redux-saga? – Listed

you might have forgotten the all effect in rootSaga() – Listed

@codekaizer While thunk (with more interesting action creators) will act more like synced code, sagas will do it's job in a background. Can you explain better what do u mean with "all" effect in rootSaga? However this software works perfectly before the update.. Thanks – Strapless

@mene, there's a reason why in createStore() it is applyMiddleware without an s. in your rootSaga() you are yielding a list of generators without any effect. – Listed

@codekaizer in every saga I use takeLatest, call and put as effects. – Strapless

Possible duplicate of React Router Redux ConnectedRouter Not Updating With Route Change – Listed

@codekaizer I think not (view my edit on the main topic) – Strapless

@Strapless - connect should accept two arguments. In case you don't use mapStateToProps you should pass a null instead. Try using it like so: export default connect(null, mapDispatchToProps)(Home) – Trimmer

@jank I also use "export default connect(mapStateToProps, mapDispatchToProps)(Home);". It depends by my page should do – Strapless

@Strapless Did you come up with any alternative to your above fix? Would be interested to know. Your initial solution work for me also, so thanks :) – Allineallis

@Allineallis I don't find other solutions, still waiting for an answer :/ For now it's working well, however it isn't the best solution – Strapless

@Strapless - I noticed your answer in the comments, However, did you try replacing mapStateToProps with null? (since you are not using it). – Trimmer

Answer 1

Change from:

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

To:

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

Topheavy