Extract Local State into Redux

JavaScript
1

Tell us what’s happening:
Hi everyone! I don’t know if it’s just that I can’t understand the instruction or something is wron with my code and I’m missing it, but I can’t pass the last two tests (Dispatching the submitMessage on the Presentational component should update Redux store and clear the input in local state and The Presentational component should render the messages from the Redux store)and I don’t know what my mistake is.
Could you please have a look and help me out?
Thanks!!

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:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      input: '',
    }
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  }
  handleChange(event) {
    this.setState({
      input: event.target.value
    });
  }
  submitMessage() {
    messages: this.props.messages.concat(this.props.input),
    this.setState({
      input: '',
    });
  }
  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.props.messages.map( (message, idx) => {
              return (
                 <li key={idx}>{message}</li>
              )
            })
          }
        </ul>
      </div>
    );
  }
};
// Change code above this line

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

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

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Container/>
      </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/extract-local-state-into-redux

2

inside of your submitMessage() you need to call e.preventDefault() to prevent default submit behavior and also you need to call this.props.submitNewMessage() in order to dispatch an action… hope this helps…

1 Like
3

still doesn’t work :frowning:

4

have you included e in submitMessage() definition? and have you called this.props.submitNewMessage(this.state.input) also inside of submitMessage()?

2 Likes
5

I had forgotten to pass on the argument!!
Thanks!!!

1 Like