1

I have parent and child component. And I try to update the state from child component. At the parent, UI is not refresh.

Parent.tsx

const formValues = useSelector((state: MYReducer) => state.VTReducer.formValues);

{!formValues.isRetrieveUser && <Grid container spacing={6} >
                    <Grid item xs={12}>

                        <div className="label-style required">Name</div>
                       
                    </Grid>
                </Grid>}

Child.tsx update the state like this=>

dispatch({
            type: FormActionType.EditFormValue, key: "isRetrieveUser", value: true //this is test value
        })

VTReducer.tsx

const initialState = {
    formValues: {
        isRetrieveUser: false
    }
}

const VTReducer = (state: any, action: any) => {
    switch (action.type as FormActionType) {
        case FormActionType.EditFormValue:
            state.formValues[action.key] = action.value;            
            return { ...state };
        case FormActionType.EmptyFormValue:
            return {
                ...(state = initialState)
            }
        default:
            return { ...(state = initialState) }
    }
}
export { initialState, VolunteerReducer };

What I did,

I add the button click at the parent to see the formValues state whether its change or not after child updated the state by reducer, and I see state also updated.And this Name field is show always.

So Its mean state is change according by reducer but only parent UI is not refresh by this updated state.

What I am missing?

Loran
  • 772
  • 4
  • 16
  • 38

0 Answers0