Reading the problem, local state

These instructions are hard to understand. " Next, modify the submitMessage() method so that it dispatches submitNewMessage() from this.props , and pass in the current message input from local state as an argument." It seems okay to break the statement apart. " Next, modify the submitMessage() method so that it dispatches submitNewMessage() from this.props," and “Pass in the current message input from local state as an argument.” The first part already is difficult to understand. How would submitNewMessage() come from this.props? Reading about local state and other posts on this topic is not making much clear.


//Extract local state into Redux
// Redux:
const ADD = 'ADD';

const addMessage = (message) => {
return {
  type: ADD,
  message: message
}
};

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

const store = Redux.createStore(messageReducer);

// React:
const Provider = ReactRedux.Provider;
const connect = ReactRedux.connect;

// Change code below this line
class Presentational extends React.Component {
constructor(props) {
  super(props);
  this.state = {
    input: '',
  }
  this.handleChange = this.handleChange.bind(this);
  this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
  this.setState({
    input: event.target.value
  });
}
submitMessage() {
  this.setState((state) => ({
    input: '',
    messages: state.messages.concat(state.input)
  }));
}
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>
  );
}
};
// Change code above this line

const mapStateToProps = (state) => {
return {messages: state}
};

const mapDispatchToProps = (dispatch) => {
return {
  submitNewMessage: (message) => {
    dispatch(addMessage(message))
  }
}
};

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

class AppWrapper extends React.Component {
render() {
  return (
    <Provider store={store}>
      <Container/>
    </Provider>
  );
}
};
/*
<div>
<h2>Extract Local State into Redux</h2>
<pre><code>
this.state = {
    input: '',
    messages: []
  }
  </code></pre>
<p>I know nothing about local state and as much about extracting local state. The first instruction is to remove <code>messages</code> in the local state. I am going to remove the messages object from initial state. "These messages will be managed by Redux."</p>
<p>"Next, modify the <code>submitNewMessage()</code> method so that it dispatches <code>submitNewMessage()</code> from <code>this.props</code>, and pass in the current message input from local <code>state</code> as an argument.<br>
I can break that apart and reword it.<br> 
<code>mapDispatchToProps</code> is the only place <code>submitNewMessage</code> is mentioned. It is not where I change dispatch since the comment says to change code above that section. I mistyped <code>submitMessage()</code> as <code>submitNewMessage()</code>. In the render, <code>submitMessage</code> dispatches <code>submitNewMessage</code>. In <code>submitMessage()</code>, there are the two objects again of input and messages.</p>
<pre><code>
submitMessage() {
  this.setState((state) => ({
    input: '',
    messages: state.messages.concat(state.input)
  }));
}
</code></pre>
<p></p>
<pre><code></code></pre>
<p></p>
<pre><code></code></pre>
<p></p>
</div>
*/
  **Your browser information:**

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

Challenge: Extract Local State into Redux

Link to the challenge:

You’re the first person here to not instantly understand Redux. Oh, no, wait, the opposite of that - everyone struggles with this stuff. Take a deep breath and realize that your confusion is completely normal.

How would submitNewMessage() come from this.props ?

It is added into the component props by the HOC (Higher Order Component, a function that takes in a component and returns a new component, it’s a React thing) returned by connect.

This:

const mapDispatchToProps = (dispatch) => {
  return {
    submitNewMessage: (message) => {
      dispatch(addMessage(message))
    }
  }
};

So, this is a function that returns an object. One of the properties on that object is submitNewMessage which is a function that dispatches a redux action.

const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);

This is the magic.

connect(mapStateToProps, mapDispatchToProps)

This is a redux function that takes these two functions and knows what to do with them. It returns an HOC that will connect our component to redux, as described by mapStateToProps and mapDispatchToProps. This HOC is designed to add things onto the props of the returned component.

 connect(mapStateToProps, mapDispatchToProps)(Presentational);

This is using that returned HOC and passing in the component, Presentational. Presentational does not have those things on props, but the component returned by that HOC will. That component is stored in Container.

Does that make sense?

But yeah, this is confusing stuff.

Thanks. I am taking a leave of absence from coding. I am not sure if I will return. Thank you for all your help.

Well, I hope it wasn’t something I said…

Hi @crystalio303 !

I understand you wanting to leave coding.
Learning all of this stuff is hard and overwhelming.

Taking breaks is healthy.

I have definitely felt that over these last 10 months.
What has helped me was to take things slow and at my own pace.

I also build side projects alongside the FCC curriculum to help me better understand the concepts.

If you decide to return to coding, the forum is here to help you out.

Good luck! :grinning:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.