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 ...
