Kinda stuck on Connect Redux to the Messages App

Kinda stuck on Connect Redux to the Messages App
0

#1

Tell us what’s happening:
Everything renders and seems to work fine but I keep getting these failing messages. I’ve tried a few things but keep getting these.

The Presentational component should receive messages from the Redux store as a prop.
The Presentational component should receive the submitMessage action creator as a prop.

Your code so far


// Redux:
const ADD = 'ADD';

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

const messageReducer = (state = [], action) => {
  switch (action.type) {
    case ADD:
      return [
        ...state,
        action.message
      ];
    default:
      return state;
  }
};

const store = Redux.createStore(messageReducer);

// React:
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
      messages: []
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    const currentMessage = this.state.input;
    this.setState({
      input: '',
      messages: this.state.messages.concat(currentMessage)
    });
  }
  render() {
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {this.state.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};

// React-Redux:
const mapStateToProps = (state) => {
  return { messages: state }
};

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

const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// define the Container component here:
const Container = (state) => {
  connect(mapStateToProps, mapDispatchToProps)(Presentational)
  return <Presentational{...state}/>
}


class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    // complete the return statement:

    return (
      <Provider store={store}>
        <Container/>
      </Provider>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:60.0) Gecko/20100101 Firefox/60.0.

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


#2

So far so good!

As far as your error messages:

  1. The Presentational component should receive messages from the Redux store as a prop:
    Check your Presentational component’s render method and think about where your messages are coming from.

  2. The Presentational component should receive the submitMessage action creator as a prop.:
    Look again at how you are defining your Container component. It should be very similar to the previous lesson. https://learn.freecodecamp.org/front-end-libraries/react-and-redux/connect-redux-to-react

Let me know if you still need help!


#3

Cheers, I got really hung up on the way I was trying to solve it. Needed that perspective shift.


#4

Happy to help! Reach out or hop in the forums if you need more help!


#5

I know this is probably old, but just to help someone who might get stuck in future.
In order for you to create the new component that connects Presentational component to Redux store,all you need to do is call it like a constant like so:

const Container = connect(mapsToState, mapsToDispatch)(Presentational)

Container thus becomes an instance of the Presentational Class.and is in itself a class…(React Compoent) and can easily be wrapped by the Provider like so:

<Provider store = {store}>
<Container />
</Provider>

Now…you might be getting that error for a few reasons:

  1. The order in which you call the dependencies to the connector matters. It should begin with mapsToState
  2. It is important that all of React components begin with Capital C…it should thus be Container and not container.