CODEWITHSUNDEEP
javascriptreactjstypescriptreact-router
Dimitar Dimitrov
Dimitar Dimitrov

Reputation: 15148

React Router v4 with Redux - dispatch is not passed

So, I've been trying to switch my app to React Router v4 (the api has changed quite a lot), and this is where I've reached:

Router Setup

const createStoreWithMiddleware = applyMiddleware(
   thunkMiddleware,
   createLogger
)(createStore);
const store = createStoreWithMiddleware(rootReducer);

const RouterLayout = () => (
    <Provider store={store}>
        <App>
            <Switch>
                <Route component={Login} path="/login" />
                <Route component={AccountDetails} path="/account/:id" />
            </Switch>
        </App>
    </Provider>
);

const routes = (
    <HashRouter>
        <RouterLayout />
    </HashRouter>
);

ReactDOM.render(routes, document.getElementById("app-container"));

Now my problem is that for some reason I can't get the redux hooked to my components:

export class Login extends React.Component<any, any> {
    componentDidMount() {
        console.log(this.props);
        // this.props.dispatch is undefined 
        // I'm getting however router props: 
        // match: Object, location: Object, history: Object, staticContext: undefined)
    }

    render() {
        return (
            <div>
                This is the Login Component
            </div>
        );
    }
}

export default connect((state: AppState): any => {
    return state;
})(Login);

It's interesting that the App component can connect and get access to dispatch without issues, but Login doesn't have it. I'm pretty sure I'm doing something wrong, but I don't know what exactly.

Upvotes: 1

Views: 299

Answers (1)

Mμ.
Mμ.

Reputation: 8542

If this.props.dispatch is not available, then most likely your component is not connected to redux.

I think the problem here is that you are exporting Login twice, one as a react component and the other as a component connected to the redux store (with export default). In the file where RouterLayout exists, you probably import login with the curly brackets and thus the Login component here is the component that is not connected to the redux.

In addition, your createStore does not look right. It should look like the following:

const createStoreWithMiddleware = (reducer) => {
  const middlewares = applyMiddleware(
     thunkMiddleware,
     createLogger
  );

  return createStore(
    reducer,
    middlewares
  );
}

const store = createStoreWithMiddleware(rootReducer);

Upvotes: 3

Related Questions