# freeCodeCamp Challenge Guide: Connect Redux to the Messages App

**URL:** <https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-connect-redux-to-the-messages-app/301427>\
**Category:** freeCodeCamp Contributors\
**Tags:** guide\
**Created:** [August 3, 2019, 12:59pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-connect-redux-to-the-messages-app/301427 "2019-08-03T12:59:59Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![camperbot](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/camperbot/32/18364_2.png) [@camperbot](https://forum.freecodecamp.org/u/camperbot)\
**Post date:** [August 3, 2019, 1:00pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-connect-redux-to-the-messages-app/301427/1 "2019-08-03T13:00:00Z")

</div>

# [Connect Redux to the Messages App](https://www.freecodecamp.org/learn/front-end-libraries/react-and-redux/connect-redux-to-the-messages-app)

* * *

## Solutions

> **Solution 1 (Click to Show/Hide)**
>
> ```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:
> class Presentational 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 (
> <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>
> );
> }
> };
> 
> // React-Redux:
> const mapStateToProps = (state) => {
> return { messages: state }
> };
> 
> const mapDispatchToProps = (dispatch) => {
> return {
> submitNewMessage: (newMessage) => {
> dispatch(addMessage(newMessage))
> }
> }
> };
> 
> const Provider = ReactRedux.Provider;
> const connect = ReactRedux.connect;
> 
> // define the Container component here:
> const Container = connect(mapStateToProps,mapDispatchToProps)(Presentational)
> 
> class AppWrapper extends React.Component {
> constructor(props) {
> super(props);
> }
> render() {
> // complete the return statement:
> return (
> <Provider store={store}>
> <Container />
> </Provider>
> );
> }
> };
> 
> ```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 8, 2025, 3:58pm UTC](https://forum.freecodecamp.org/t/freecodecamp-challenge-guide-connect-redux-to-the-messages-app/301427/2 "2025-01-08T15:58:22Z")

</div>