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:
