我们可以部分更新角度为6 / ngrx的组件的状态吗

时间:2018-11-15 13:04:06

标签: angular redux ngrx

我有一个名为 FormComponent 的组件,并且我设置了一个reducer来管理名为 formReducer 的组件的状态。

在初始加载时,我以以下格式获取数据

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

如果我想在form1上执行部分保存,如何在不影响(重置)form2Data和form3Data的情况下更新state.info.form1Data。

我要执行部分状态更新

我的组件HTML格式如下:

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

我在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);
 }
})

我的减速机的格式如下:

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}
}

我刚开始在ngrx存储和angular 6上工作。我能够做些小事情,但面临复杂结构中的问题。

0 个答案:

没有答案