Redux vs React, React not needed?

JavaScript
1

Redux vs React

l was wondering why does the React display the html fine if l comment out the redux except the store variable?

l want to know why is this a happening, why can the react work when most of the redux is commented out?

The tests all pass too.

Some insight in why redux is not needed? Why would we need it ?

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() {
    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>
        <ul> </ul>
      </div>
    );
  }
};

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
  // Below is the code required to pass the test
  render() {
    return (
      <Provider store={store}>
        <DisplayMessages />
      </Provider>
    );
  }
  // Above is the code required to pass the test
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:72.0) Gecko/20100101 Firefox/72.0.

Challenge: Use Provider to Connect Redux to React

Link to the challenge:

2

Because in this lesson you’re only learning how to connect Redux to React, you’re not using Redux yet.

1 Like