Pfthb

I have a component named FormComponent and i have setup a reducer to managed the state of this component named formReducer.

On Initial load i get the data in following format

formInfo: 
 form1Data: form1properties,
 form2Data: form2Properties,
 form3Data: form3Properties

If i want to perform partial save on form1, How can i update my state.info.form1Data without affecting (resetting) form2Data & form3Data.

I want to perform a partial state update

my component HTML is in following format:

<div>
 <form> form1Data </form> /*api 1*/
 <form nestedForm> /*api 2*
 <form> form2Data </form>
 <form> form3Data </form>
 </form>
</div>

my Component Code inside ngOnInit:

this.actions.pipe(
 ofType(GET_FORM_INFO_SUCCESS),
 mergeMap(v => this.state)
).subscribe((data: any) => 
 if(data && data.formInfo) 
 //inits basic (form1Data) & nested form (form2Data & form3Data)
 this.initForm(data.formInfo);
 
)

my reducer is in following format:

defaultState = 
 formInfo: 
 form1Data: 
 somePropertiesCollection: defaultValues
 ,
 form2Data: 
 somePropertiesCollection: defaultValues
 ,
 form3Data: 
 somePropertiesCollection: defaultValues
 
 


function formreducer(state: defaultState, action: ALL) 
 case GET_FORM_INFO_SUCCESS:
 return state, ...action.payload
 case FORM_SECTION_1_SAVE_SUCCESS:
 const form1Data = action.payload;
 const formInfo = ...state.formInfo, form1Data
 return ...state, formInfo
 case FORM_SECTION_2_SAVE_SUCCESS:
 const form2Data, form3Data = action.payload;
 const formInfo = ...state.formInfo, form2Data, form3Data
 return ...state, formInfo

I just started working on ngrx store and angular 6. I was able to do small stuff but facing problem in complex structure.