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.