Connect Redux to the Messages App Confused!

Connect Redux to the Messages App Confused!
0.0 0

#1

Tell us what’s happening:
Not able to understand why this is not working. Im getting confused between the state inside the Presentational component and the state inside the store. When I am adding a message in the text field in the Presentational component, how is it updated in the state inside the store ? What are the things I should look towards in the code I have already written ? Im really confused. Please help.

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;

const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational);// define the Container component here:


class AppWrapper extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
  // complete the return statement:
    return (
      <Provider store = {store}>
      <Presentational>
      <Container/>
      </Presentational>
       
      
       </Provider>

    );
  }
};

Your browser information:

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

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


#2

Ah, you are really close ^^

Im getting confused between the state inside the Presentational component and the state inside the store

It happens, but usually you will have those kind of stuff in separate file, which helps differentiate^^
The actual challenge is strictly related to the others in that section, and your confusion is cleared up in the next challenge; the code you have here represent more or less what you have written so far, not a clean react-redux setup.

When I am adding a message in the text field in the Presentational component, how is it updated in the state inside the store ?

At the moment is is not, look forward to the next challenge :wink:

What are the things I should look towards in the code I have already written ? Im really confused. Please help.

The Container component is somewhat ‘derived’ from the Presentational, so you don’t need both in the appwrapper: delete the one in excess and you will be fine^^

Good luck!