Connect Redux to React - ConnectedComponent is not defined

Tell us what’s happening:

I’m not able to pass.
I tried: connect(mapStateToProps, mapDispatchToProps)(Presentational);
The console output is:

// running tests
ConnectedComponent is not defined
ConnectedComponent is not defined
ConnectedComponent is not defined
// tests completed

Please help to identify what went wrong…

Your code so far


const addMessage = (message) => {
  return {
    type: 'ADD',
    message: message
  }
};

const mapStateToProps = (state) => {
  return {
    messages: state
  }
};

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message));
    }
  }
};

class Presentational extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return <h3>This is a Presentational Component</h3>
  }
};

const connect = ReactRedux.connect;
// change code below this line
connect(mapStateToProps, mapDispatchToProps)(Presentational);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.30 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react-and-redux/connect-redux-to-react

It is asking you to create a ConnectedComponent const and assign your connect function call to it.

3 Likes

Ahh! I missed it in the instructions… Thank you @ghukahr!

What am I supposed to see when I try changing either of connect 's arguments to null and observe the test results?

You can log your props in the constructor. Basically, it connects the state and dispatch functions to your props.

Not sure if you saw redux already? Imagine you have a big redux store, with mapStateToProps you can pick only the section of the state your component will need instead of passing the whole store. The same for mapDispatchToProps, you give your component only the actions it will use.

1 Like