diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/extract-local-state-into-redux/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/extract-local-state-into-redux/index.md index e542b33265..36094b84fe 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/extract-local-state-into-redux/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/extract-local-state-into-redux/index.md @@ -3,8 +3,119 @@ title: Extract Local State into Redux --- ## Extract Local State into Redux -This is a stub. Help our community expand it. +### Hint 1 +You need to change the following sections: +* default state declarations: remove `messages` +* `submitMessage`: use `props` +* `render`: the unordered list should use `props` instead of `this.state.messages` -This quick style guide will help ensure your pull request gets accepted. +### Hint 2 +Replace `this.state.messages` with `this.props.messages`. - +### Hint 3 +The `submitMessage` function still needs to set the state of the `input`. + + +### Solution +
+ Spoiler! + +```jsx +// 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.props.submitNewMessage(this.state.input); + this.setState({ + input: '' + }); + + } + render() { + return ( +
+

Type in a new Message:

+
+ + +
+ ); + } +}; +// 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 ( + + + + ); + } +}; + ``` + +