Загрузите данные из базы данных в обработчик формы реакции с помощью хуков реакции

Question

Я использую весеннюю загрузку в качестве бэкэнда и reactjs в качестве внешнего интерфейса, также я использую redux, thunk и ax ios.

моя проблема - когда я пытаюсь загрузить пациента из базы данных в реагирующий крючок -form, что пациент найден в магазине redux, но когда я пытаюсь получить к нему доступ, продолжаю говорить, что он не определен

я не могу определить правильный logi c для этого с помощью hook. * моя форма обработчика реакции -

function ModifyPatientForm(props) {
    const dispatch=useDispatch();
    const {register, handleSubmit, reset, errors} = useForm();
    const history=useHistory();
    const patientState=useSelector(state=>state.patient.patient);

    useLayoutEffect(()=>{
        dispatch(getPatient(props.match.params.id))
        console.log("patient dispatch" + patientState)
        const data={
            firstName:patientState.person.personName.firstName,
            parentName:patientState.person.personName.parentName,
            grandName:patientState.person.personName.grandName,
            familyName:patientState.person.personName.familyName

        }
        if(patientState)
            reset(data);
    },[])




    const onSubmit = (data => {
        dispatch(createPatient(data, history))
    });


    return (
        <div>
            <h1 className="pb-3">Patient Form</h1>
            <br/>

            <form onSubmit={handleSubmit(onSubmit)}>

                <div className="form-group">

                    <label htmlFor="firstName">
                        First Name
                    </label>
                    <input className="form-control"
                           key="firstName"
                           name="firstName"
                           ref={register({required: true})}

                    />

                </div>


                <div className="form-group">

                    <label htmlFor="parentName">
                        Parent Name
                    </label>
                    <input className="form-control"
                           key="parentName"
                           name="parentName"
                           ref={register({required: true})}
                    />

                </div>

                <div className="form-group">

                    <label htmlFor="grandName">
                        Grand Name
                    </label>
                    <input className="form-control"
                           key="grandName"
                           name="grandName"
                           ref={register({required: true})}
                    />

                </div>

                <div className="form-group">
                    <label htmlFor="familyName">
                        Family Name
                    </label>
                    <input className="form-control"
                           key="familyName"
                           name="familyName"
                           ref={register({required: true})}
                    />

                </div>
                <input type="submit"/>
            </form>

        </div>
    );
}

export default ModifyPatientForm;

, а действие, отправляемое из useLayoutEffect, -

export const getPatient = (id)=>async  dispatch =>{

    try{
        const res=await apiURL.get(`/patient/${id}`)
        dispatch({
            type:patient.GET_PATIENT,
            payload:res.data
        })

    }
    catch (e) {

    }
}

и, наконец, редуктор

const initialState={

    patient:{}
}
export default function (state =initialState,action) {

    switch (action.type) {
        case patient.GET_PATIENT:
            return {
                ...state,
                patient: action.payload
            }

        default:
            return state;
    }

}

Примечание: i Я использую root редуктор

 export default combineReducers({

    patient: patientReducer
})