I am mystified by how this works

[josephlevin]

Tell us what’s happening:
Describe your issue in detail here.

I am going through the Front End Development Libraries: React and Redux: Use Provider to Connect Redux to React

The only thing this challenge claims / seems to do is make a connection between the React code and the Redux code so as to have a global repository of application state (i.e, the ‘store’).

Other than the accepted solution, which adds the Provider, there doesn’t appear to be anything else done to the original React code, which seems like it is still using local state.

I thought there would be some way to access the state variables (as controlled by Redux) from within the React code that would somehow point to the Redux code such that the local this.setState() functions would have been required to be altered in some way, if not removed entirely.

How can I tell that the Redux code is doing anything of value?

I would really appreciate an explanation that is kept as simple as can be, if possible, as I am genuinely confused at this point…feeling like a kid befuddled by a “got your nose” trick.

Thanks, in advance, for your help!

  **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
  render() {
    return (
      <Provider store={store}>
        <DisplayMessages />
      </Provider>
    );
  }
// Change code above this line
};

  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.63 Safari/537.36

Challenge: Use Provider to Connect Redux to React

Link to the challenge:

freeCodeCamp.org

[DanCouper]

You’re correct that it doesn’t show you how to connect the state in the component to the global store, but you’re getting ahead of yourself: that lesson is just explaining how to add the provider that you’ll then make use of in the next lesson. You need this bit in place before you actually wire everything up

Edit: with React, everything is generally stored in the state of components: that’s how it works – state in one component updates, then if that’s been passed as props to another component, that component updates as well. That’s how you get the reactive behaviour: you just say a component takes some values, and if those values change, React handles that.

With this, you are putting the store, an object that you can update, in a component. Then in the next lesson, it’s going to show you how you can pass values stored in that component to any other components in your app as props

[josephlevin]

Thank you, Dan. for that. I’m looking forward to continuing!