React and Redux - Use Provider to Connect Redux to React

[ettoremihaili]

Tell us what’s happening:
Hello there, found the exact same question here but no one seems to have answered/care

so: do we need a constructor and super(props) when it comes to an app wrapper ?
If yes: why?
if not: why not?

(go at the end of the code, the AppWrapper component)

it seems to work both with and without constructors, so I’d like someone more technical to explain why exactly

Your code so far

// Redux:
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:

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((state) => {
      const currentMessage = state.input;
      return {
        input: '',
        messages: 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 below this line
  constructor(props) {
    super(props);
  }
  render () {
    return (
  <Provider store={store}>
    <DisplayMessages />
  </Provider>
    )
  // Change code above this line
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Challenge: React and Redux - Use Provider to Connect Redux to React

Link to the challenge:

freeCodeCamp.org

[lasjorg]

I would say no, a constructor is not needed for the wrapper.

constructor()

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

You don’t even really need it if the state is using class fields. Which just leaves the binding which can be avoided using arrow syntax.

[Sylvant]

Hi, your question raised my curiosity, as i was not familiar with this particular detail and havent really questioned it back when i wrote class components. I found this fine article Why Do We Write super(props)? — overreacted and if i understood the explanation correctly, there are two main reasons why we would want to call super explicitely and why we want to also pass props to it and it is, so we can access this in the constructor and we can access the props object in the constructor. Looks like, if we dont utlize either of this, not calling super() is alright. You can read a detailed explanation in the article. On the official React docs, i also found that:

If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

You can read more here
Overall, id advise you not to use class components at all and get comfortable with React hooks.