Scribd
Upload
67 views2 pages

Extract Local State Into Redux

The document defines a Redux store to manage messages in state. It also defines a Presentational component to display messages and submit new ones. The Presentational component is connected to the Redux store using React-Redux's connect method. This passes the messages state and an action creator to submit messages as props rather than managing state locally.

Uploaded by

mody
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
67 views2 pages

Extract Local State Into Redux

The document defines a Redux store to manage messages in state. It also defines a Presentational component to display messages and submit new ones. The Presentational component is connected to the Redux store using React-Redux's connect method. This passes the messages state and an action creator to submit messages as props rather than managing state locally.

Uploaded by

mody
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

// 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);

// Remove property 'messages' from Presentational's local state


this.state = {
input: ''
}
this.handleChange = this.handleChange.bind(this);
this.submitMessage = this.submitMessage.bind(this);
}
handleChange(event) {
this.setState({
input: event.target.value
});
}
submitMessage() {

// Call 'submitNewMessage', which has been mapped to Presentational's props,


with a new message;
// meanwhile, remove the 'messages' property from the object returned by
this.setState().
this.props.submitNewMessage(this.state.input);
this.setState({
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>
{/* The messages state is mapped to Presentational's props; therefore,
when rendering,
you should access the messages state through props, instead of
Presentational's
local state. */}
{this.props.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>
);
}
};

You might also like