CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
Ben Zoker
Ben Zoker

Reputation: 157

Error in App class when using React-Redux "connect "

I am receiving the following error when trying to use the connect() function from react-redux:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `App`.

This is App:

import { Provider } from 'react-redux';
import configureStore from './store';
const App = class extends React.PureComponent {
  render() {
    const { title } = this.context;
    return (
      <div className="center-screen">
        {title}
        <Provider store={configureStore()}>
          <Chat />
        </Provider>
      </div>
    );
  }
};

This is the relevent code end of chat:

import { connect } from 'react-redux';


  ...


    const mapStateToProps = state => ({
  ...state
});
const mapDispatchToProps = dispatch => ({
  addMessage: () => dispatch(addMessage)
});

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

When using : "export default Chat" instead of connect, it's working fine..

Upvotes: 3

Views: 920

Answers (2)

MxOliver
MxOliver

Reputation: 38

Where are you defining Chat the component in your connect function?

My usual set up is (I'm using class but const ConnectedChart() would still be this same set up)

class ConnectedChart extends Component {

//// All code here render and return etc

}

const Chart = connect (mapStateToProps)(ConnectedChat);

export default Chart;

So that way you are essentially assigning a component to Chart with the connect statement and then you export default. I think exporting the connect statement directly might by throwing an error but if that doesn't work post the full chart component and I'll see if there is something else going on

EDIT: based on the full code

try this in your App.js:

import React from "react";
import ReactDOM from 'react-dom';
import "./App.css";
import ConnectedChat from "./Chat";
import { Provider } from "react-redux";
import configureStore from "./store";

ReactDOM.render(
        <Provider store={configureStore()}>
          <ConnectedChat />
        </Provider>
    );

and then put your div center screen in ConnectedChat

(if you are going to be adding more components later and want that div wrapping all of them, create a main app component like landing or something and call that between your provider instead of chat, and then in that landing component render the div and your ChatComponent)

Also if you don't have an index.js change the 'main' in your package.json to this App.js component

Upvotes: 0

Chris B.
Chris B.

Reputation: 5763

Try this:

const ConnectedChat = connect(
  mapStateToProps,
  mapDispatchToProps
)(Chat);

export default ConnectedChat;

Or you may wish to rename the class definition to ConnectedChat and reverse the names so you can import it as just Chat.

Edit: Also make sure you're importing the Chat component in the App file, as well as the addMessage action creator if you're not.

Upvotes: 2

Related Questions