How we are joining redux and react code

JavaScript
1

My code works but I don’t know how redux is operating in a sense that what is happening is constructor of displayMessage. Where is the connection and what is the need as we are doing everything in react code itself. Please help
// 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(
        <Provider store={store}>
          <DisplayMessages/>
            </Provider>);
 } // change code above this line
};
2

you can use ‘connect’ wrap you component; and you can use this.props.dispatch

3

My code is working fine , I just need to know where is the connection because we are doing everything in react code itself.

4

If you’re using modules, you put the connect() call in the default export, i.e.
export default connect(MyComponent)

Since you’re using the React global and not ES6 modules, you just redefine the class with the wrapped version:

class MyComponent { 
... component stuff here ...
}
MyComponent = connect(MyComponent)
5

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums