Use Provider to Connect Redux to React

JavaScript
1

Tell us what’s happening:
Can someone tell whats wrong with this code…
giving error as “Cannot call a class as a function”

Your code so far


// Redux Code:
const ADD = 'ADD';

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

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



const store = Redux.createStore(messageReducer);

// React Code:

class DisplayMessages 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() {
    this.setState({
      messages: [...this.state.messages, this.state.input],
      input:""
    });
  }
  render() {
    const msgs = this.state.messages.map(x=><li>{x}</li>);
    return (
      <div>
        <h2>Type in a new Message:</h2>
        <input
          type = "text"
          value={this.state.input}
          onChange={this.handleChange}/><br/>
        <button onClick={this.submitMessage}>Submit</button>
        <ul>
          {msgs}
        </ul>
      </div>
    );
  }
};

const Provider = ReactRedux.Provider(store);

class AppWrapper extends React.Component {
  // render the Provider here
  render(){
    return(
      <Provider store={store}>
        <DisplayMessages/>
      </Provider>
    )
  }

  // change code above this line
};

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36.

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

1 Like
2

This line right here. ReactRedux.Provider is not a function. It returns a react class component, which you’re to use directly.

You used it correctly as a component, so just remove the function call.

3

Right so I tried the following code:

// Redux Code:
const ADD = 'ADD';

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

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

const store = Redux.createStore(messageReducer);

// React Code:

class DisplayMessages 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>
    );
  }
};

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
  // render the Provider here
  render() {
    return (
      <div>
        <Provider store = {store}>
          <DisplayMessages />
        </Provider>
      </div>
    )
  }
  // change code above this line
};

And it says: The DisplayMessages component should render an h2, input, button, and ul element.
despite the face that my display is showing all of this. It this a bug?

6

Try unwrapping your render() return section from the div

1 Like
7

That worked. Thank you.