diff --git a/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md b/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md index 383ab56c79..8e2b2bbac4 100644 --- a/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md +++ b/guide/english/certifications/front-end-libraries/react-and-redux/use-provider-to-connect-redux-to-react/index.md @@ -3,8 +3,95 @@ title: Use Provider to Connect Redux to React --- ## Use Provider to Connect Redux to React -This is a stub. Help our community expand it. +### Hint 1 -This quick style guide will help ensure your pull request gets accepted. +You do not need to wrap the `Provider` in any `
` tags. - +### Solution + +```jsx +// Redux Code: +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 Code: + +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() { + const currentMessage = this.state.input; + this.setState({ + input: '', + messages: this.state.messages.concat(currentMessage) + }); + } + render() { + return ( +
+

Type in a new Message:

+
+ + +
+ ); + } +}; + +const Provider = ReactRedux.Provider; + +class AppWrapper extends React.Component { + // Below is the code required to pass the test + render() { + return ( + + + + ); + } + // Above is the code required to pass the test +}; +```