Update the dummy reducer function to the following:

import deepmerge from 'deepmerge';
 import { validator } from './utils';
 const reducer = function (state = initialState, action) {
   if (action.type === 'RegistrationForm:update') {
     const { field, value } = action;
     const valid = validator[field](value);
     const newState = {
       registrationForm: {
         [field]: {
           value,
           valid
         }
       }
     }
     return deepmerge(state, newState);
   }
   return state;
 }

We have migrated the validation logic here, and we are returning a new instance of the state. Because our state object has many layers, simply using Object.assign or the ES6 spread syntax would not be sufficient. Therefore, we are using an NPM package called deepmerge to perform the merge of our old and new states. So, make sure we are adding that package to our project:

$ yarn add deepmerge

Convert the rest of the RegistrationForm component to use Redux (that is, change the handleRegistration method), and then do the same for the LoginForm component.

Then, serve your application again, and it should work the same way as before. But always run yarn run test:e2e to make sure!