Search⌘ K
Home
Courses
Understanding Redux: A Beginner's Guide To State Management

Submitting the Form

Explore how to manage form submission in a Redux-driven React app by creating event handlers that dispatch actions. Understand preventing default form behavior, accessing state values, and updating reducers to reflect new messages dynamically in your chat interface.

We'll cover the following...

Right now, when you type a message and hit enter, it doesn’t show up in the conversation list, and the page reloads.

Terrible!

Let’s handle the form submission.

In MessageInput.js, add a handleSubmit event handler as shown below:

Javascript (babel-node)
...
<form className="Message" onSubmit={handleSubmit}>
  ...
</form>
...

Think about it for a minute. To update the list of messages in the conversation…we need to dispatch an action! ...