CODEWITHSUNDEEP
reactjsreact-reduxreact-router
f0rfun
f0rfun

Reputation: 757

ConnectedRouter TypeError: Cannot read property 'dispatch' of undefined

trying my hands on React/Redux following the tutorial on Part 3: https://tighten.co/blog/react-101-routing-and-auth.

Part 1 and 2 has been awesome until part 3 where I bumped into the error in the title. I'm pretty sure I've been following the tutorial fine up to this point.

Any help is much appreciated. Thanks in advance SO.

Error Info 

The above error occurred in the <ConnectedRouter> component:
index.js:1446
    in ConnectedRouter (at App.js:39)
    in App (created by Context.Consumer)
    in Connect(App) (at src/index.js:11)
    in Provider (at src/index.js:10)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';
import { Provider } from 'react-redux';
import { configureStore } from './store/configureStore';

const store = configureStore();

    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      document.getElementById('app')
    )

App.js

import React from 'react';
import { ConnectedRouter } from 'react-router-redux';
import { Route, Redirect } from 'react-router-dom'
import { history } from './../store/configureStore';
import { connect } from 'react-redux';

import Header from '../containers/Header';
import Home from '../containers/Home';
import Signup from '../containers/Signup';
import Login from '../containers/Login';
import Favorites from '../containers/Favorites';

const PrivateRoute = ({component: Component, authenticated, ...props}) => {
    return (
        <Route
            {...props}
            render={(props) => authenticated === true
                ? <Component {...props} />
                : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
        />
    );
};

const PublicRoute = ({component: Component, authenticated, ...props}) => {
    return (
        <Route
            {...props}
            render={(props) => authenticated === false
                ? <Component {...props} />
                : <Redirect to='/favorites' />}
        />
    );
};


class App extends React.Component {
    render() {
        return (
            <ConnectedRouter history={history}>
                <div>
                    <Header />

                    <div className="container">
                        <Route exact path="/" component={ Home }/>
                        <PublicRoute authenticated={this.props.authenticated }  path="/signup" component={ Signup } />
                        <PublicRoute authenticated={this.props.authenticated }  path="/login" component={ Login } />
                        <PrivateRoute authenticated={this.props.authenticated }  path="/favorites" component={ Favorites } />
                    </div>
                </div>
            </ConnectedRouter>
        );
    }
}

const mapStateToProps = (state) => {
    return { authenticated: state.auth.authenticated };
};

export default connect(mapStateToProps)(App);

ConfigureStore.js

import { createStore, compose, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import rootReducer from '../reducers';
import createHistory from 'history/createBrowserHistory';
import { routerMiddleware } from 'react-router-redux';

export const history = createHistory();

export function configureStore(initialState) {
  const store = createStore(
    rootReducer,
    initialState,
    compose (
      applyMiddleware(ReduxPromise, routerMiddleware(history)),
      window.devToolsExtension ? window.devToolsExtension() : f => f
    )
    //window.devToolsExtension ? window.devToolsExtension() : undefined
  );

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers').default;
      store.replaceReducer(nextRootReducer);
    });
  }

  return store;
}

Upvotes: 15

Views: 13943

Answers (2)

Matt Bucci
Matt Bucci

Reputation: 2140

The package react-router-redux is deprecated.

Use connected-react-router instead.

Upvotes: 20

f0rfun
f0rfun

Reputation: 757

Solved it. Reverted to an older but compatible npm package of react-redux, react-router-dom/redux, redux and redux-promise at the time the project was published. Non-issue for now. Not sure what has changed. Will look into it again.

Upvotes: 0

Related Questions