# Stuck on Extract Local State into Redux

**URL:** <https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790>\
**Category:** General\
**Created:** [April 2, 2019, 2:47pm UTC](https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790 "2019-04-02T14:47:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AntonyOtero](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/antonyotero/32/113249_2.png) [@AntonyOtero](https://forum.freecodecamp.org/u/AntonyOtero)\
**Post date:** [April 2, 2019, 2:47pm UTC](https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790/1 "2019-04-02T14:47:28Z")

</div>

**Tell us what’s happening:**

I’m still not completing the last two objectives of this challenge:

- Dispatching the `submitMessage` on the `Presentational` component should update Redux store and clear the input in local state.
- The `Presentational` component should render the `messages` from the Redux store.

and the console is telling me:

> Actions must be plain objects. Use custom middleware for async actions.

Any help is appreciated.

**Your code so far**

```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.setState({
      input: ''
    });
    store.dispatch(this.props.submitNewMessage(this.state.message));
  }
  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.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>
    );
  }
};

```

**Your browser information:**

User Agent is: `Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.75 Safari/537.36`.

---

<div class="post-metadata">

**Author:** ![shimphillip](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/shimphillip/32/158663_2.png) [@shimphillip](https://forum.freecodecamp.org/u/shimphillip)\
**Post date:** [April 2, 2019, 3:02pm UTC](https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790/2 "2019-04-02T15:02:17Z")

</div>

> [@AntonyOtero](#):
>
> store.dispatch(this.props.submitNewMessage(this.state.message));

THere is no need to explicitly dispatch this action. Calling submitNewMessage will already dispatch it for you. Make sure you are passing in this.state.input though there is no this.state.message. And do it before setting input to empty strings.

Cheers 🙂

---

<div class="post-metadata">

**Author:** ![AntonyOtero](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/antonyotero/32/113249_2.png) [@AntonyOtero](https://forum.freecodecamp.org/u/AntonyOtero)\
**Post date:** [April 2, 2019, 4:53pm UTC](https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790/3 "2019-04-02T16:53:03Z")

</div>

🧐 I see. well, That worked. You have my **gratitude** 🤝 👍

---

<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 17, 2021, 8:03pm UTC](https://forum.freecodecamp.org/t/stuck-on-extract-local-state-into-redux/268790/4 "2021-01-17T20:03:34Z")

</div>