Now we have integrated with React to make our UI a deterministic representation of our state. However, as demonstrated when you tried typing in the input box, there’s no way for us to update the state. Let's change that now.

Just to recap, the way you change a state in Redux is by dispatching an action, and defining reducers that react to those actions and update the state.

Let’s start with a scenario where we are updating the state; for instance, when we type in the input box in one of the forms. At the moment, we are using the handleInputChange method to update the local state:

handleInputChange = (name, event) => {
   const value = event.target.value;
   const valid = validator[name](value);
   this.setState({
     [name]: { value, valid }
   });
 }

Instead, we want to update this event handler to dispatch an action.

An action is simply an object that describes the event that has occurred. It should be as concise as possible. After creating an action, you call the dispatch method on the store to dispatch the action. For instance, the action to dispatch after an input value changed in our RegistrationForm component would look like this:

handleInputChange = (name, event) => {
   const value = event.target.value;
   const action = {
     type: 'RegistrationForm:update',
     field: name,
     value
   }
   this.props.store.dispatch(action);
 }

Note that we removed the validation logic. This is because it does not describe the event that has occurred (the input value changed). This validation logic belongs in the reducer, which we will implement now.