How we are joining redux and react code

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,

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

const store = Redux.createStore(messageReducer);

// React Code:

class DisplayMessages extends React.Component {
  constructor(props) {
    this.state = {
      input: '',
      messages: []
    this.handleChange = this.handleChange.bind(this);
    this.submitMessage = this.submitMessage.bind(this);
  handleChange(event) {
  submitMessage() {
    const currentMessage = this.state.input;
      input: '',
      messages: this.state.messages.concat(currentMessage)
  render() {
    return (
        <h2>Type in a new Message:</h2>
        <button onClick={this.submitMessage}>Submit</button>
          { (message, idx) => {
              return (
                 <li key={idx}>{message}</li>

const Provider = ReactRedux.Provider;

class AppWrapper extends React.Component {
  // render the Provider here
        <Provider store={store}>
 } // change code above this line

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

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

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)

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.