can we partially update the state of a component in angular 6/ngrx

Viewed 739

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.

0 Answers
Related