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.
Update: This is just an import issue
The actual problem is that I am importing the component that is not yet wrapped by redux connect. The solution is to import the component using the default export instead of the named export.
// This one imports the class component, not yet wrapped with redux connect
import { Login } from './pages/Login';
// This one imports the default export wrapped by redux connect
import Login from './pages/Login';
Original post for historical purposes
import React from 'react';
import { connect } from 'react-redux
export 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!