Попытка использовать redux в первый раз, получая сообщение об ошибке «Не удается прочитать диспетчеризацию свойства undefined»

Question

Я впервые пытаюсь использовать Redux, основываясь на этом уроке:

https://medium.com/@viewflow/full-stack-django-quick-start-with-jwt-auth-and-react-redux-part-ii-be9cf6942957

По какой-то причине я получаю следующую ошибку: TypeError: Cannot read property 'dispatch' of undefined

index.js:

import React, { Component } from 'react'
import { combineReducers } from 'redux'
import { routerReducer } from 'react-router-redux'
import { render } from 'react-dom'
import { ConnectedRouter } from 'react-router-redux'
import { Provider } from 'react-redux'
import {Route, Switch} from 'react-router'
import Toggle from 'react-bootstrap-toggle';



import createHistory from 'history/createBrowserHistory'
import App from './components/App';
import routes from './routes';
import configureStore from './store'
import Login from './containers/Login';
import PrivateRoute from './containers/PrivateRoute';

export default combineReducers({
  router: routerReducer
})

const history = createHistory()
const store = configureStore(history)

render((
    <Provider store={store}>
    <ConnectedRouter history={history}>
      <Switch>
        <Route exact path="/login/" component={Login} />
        <PrivateRoute path="/" component={App}/>
      </Switch>
    </ConnectedRouter>
  </Provider>
), document.getElementById('root'));

Мой магазин, насколько я могу судить, в порядке:

. / Store.js:

import storage from 'redux-persist/es/storage'
import { apiMiddleware } from 'redux-api-middleware';
import { applyMiddleware, createStore } from 'redux'
import { createFilter   } from 'redux-persist-transform-filter';
import { persistReducer, persistStore } from 'redux-persist'
import { routerMiddleware } from 'react-router-redux'
import rootReducer from './reducers'

export default (history) => {
  const persistedFilter = createFilter(
    'auth', ['access', 'refresh']);
  const reducer = persistReducer(
    {
      key: 'polls',
      storage: storage,
      whitelist: ['auth'],
      transforms: [persistedFilter]
    },
    rootReducer)
  const store = createStore(
    reducer, {},
    applyMiddleware(
      apiMiddleware, 
      routerMiddleware(history))
  )
  persistStore(store)
  return store
}

И мое использование Connect похоже на правильность:

Containers / Login.js:

import React from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router'

import LoginForm from '../components/LoginForm'
import {login} from  '../actions/auth'
import {authErrors, isAuthenticated} from '../reducers'

const Login = (props) => {
  if(props.isAuthenticated) {
     return  <Redirect to='/' />
  }

  return (
     <div className="login-page">
       <LoginForm {...props}/>
    </div>
  )
}

const mapStateToProps = (state) => ({
  errors: authErrors(state),
  isAuthenticated: isAuthenticated(state)
})

const mapDispatchToProps = (dispatch) => ({
  onSubmit: (username, password) => {
    dispatch(login(username, password))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Containers / PrivateRoute.js:

import React from 'react'
import { Route, Redirect } from 'react-router'
import { connect } from 'react-redux'
import * as reducers from '../reducers'
const PrivateRoute = ({ component: Component, isAuthenticated, ...rest }) => (
  <Route {...rest} render={props => (
    isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)
const mapStateToProps = (state) => ({
  isAuthenticated: reducers.isAuthenticated(state)
})
export default connect(mapStateToProps, null)(PrivateRoute);

Что такоеЯ тут не так делаю?Я не вижу много документации по этому вопросу, и отладка довольно загадочная

Возвращенная переменная магазина в index.js:

Это то, что не определено:

ConnectedRouter._this.handleLocationChange

    return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.handleLocationChange = function (location) {
      _this.store.dispatch({
        type: LOCATION_CHANGE,
        payload: location
      });
    }, _temp), _possibleConstructorReturn(_this, _ret);
  }

Это трассировка всего стека:

Uncaught TypeError: Cannot read property 'dispatch' of undefined
    at ConnectedRouter._this.handleLocationChange (ConnectedRouter.js:26)
    at ConnectedRouter.componentWillMount (ConnectedRouter.js:40)
    at callComponentWillMount (react-dom.development.js:11829)
    at mountClassInstance (react-dom.development.js:11917)
    at updateClassComponent (react-dom.development.js:13492)
    at beginWork (react-dom.development.js:14090)
    at performUnitOfWork (react-dom.development.js:16416)
    at workLoop (react-dom.development.js:16454)
    at HTMLUnknownElement.callCallback (react-dom.development.js:145)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:195)
    at invokeGuardedCallback (react-dom.development.js:248)
    at replayUnitOfWork (react-dom.development.js:15745)
    at renderRoot (react-dom.development.js:16548)
    at performWorkOnRoot (react-dom.development.js:17387)
    at performWork (react-dom.development.js:17295)
    at performSyncWork (react-dom.development.js:17267)
    at requestWork (react-dom.development.js:17155)
    at scheduleWork (react-dom.development.js:16949)
    at scheduleRootUpdate (react-dom.development.js:17637)
    at updateContainerAtExpirationTime (react-dom.development.js:17664)
    at updateContainer (react-dom.development.js:17691)
    at ReactRoot../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render (react-dom.development.js:17957)
    at react-dom.development.js:18097
    at unbatchedUpdates (react-dom.development.js:17518)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:18093)
    at render (react-dom.development.js:18152)
    at Object../src/index.js (index.js:44)
    at __webpack_require__ (bootstrap 30b47a465f60aa0c83ff:678)
    at fn (bootstrap 30b47a465f60aa0c83ff:88)
    at Object.0 (store.js:28)
    at __webpack_require__ (bootstrap 30b47a465f60aa0c83ff:678)
    at bootstrap 30b47a465f60aa0c83ff:724
    at bootstrap 30b47a465f60aa0c83ff:724