React + Redux – Component not exported or Redux not connected

Hey there, I’m a React and Redux newbie and the annoying issue I’ve encountered is when you connect a component to Redux but the actions are not injected into the component’s props. When you follow the tutorial, it seems straightforward but then I get import/export errors where my component is not imported because, reasons.

import React from 'react';
import { connect } from 'react-redux

class Login extends React.Component { ... }

export default connect({
  null,
  { setAuthToken }
})(Login)

Using the code snippet above, I got an error that says my component Login was not imported. Here is what my App.tsx looks like.

import {Login} from './pages/Login';

See? It is imported properly. Now, if we export the class directly, our redux won’t be connected to the component. Therefore, we must export the connected class, not the main class itself.

It turns out the tweak is simple. Just remove the braces from {Login} so that it gets imported properly.

import Login from './pages/Login';

That’s it happy Reduxing!

This entry was posted in React, Web Development and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *