我有一个名为 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上工作。我能够做些小事情,但面临复杂结构中的问题。