Kinda stuck on Connect Redux to the Messages App

Kinda stuck on Connect Redux to the Messages App
0.0 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!