在React中从thunk获得成功调度后，是否有更好的方法来重置表单字段

Question

我正在thunk中进行一个Postneneneba API调用，并为成功发送一个布尔成功密钥，并在出错时发送一条错误消息。

我现在想清除成功的表单数据，并显示错误的错误消息。

为此，在componentDidUpdate()中，我正在检查

componentDidUpdate(){
const {success, errorMsg} = this.props;
if ( success )
this.setState(defaultState);
else if(errorMsg!=='')
//show error
}

现在，我必须调度一个操作来重置redux存储中的成功和错误，否则它将进入无限的渲染周期。

但我认为，对于实现这样一个简单的任务来说，这有点复杂，因为如果我在按钮处理程序上调用组件本身中的API，那么就会容易得多。

所以我想知道是否有更好的方法来使用thunk完成这项任务？

Answer 1

您可以这样处理：

Redux表单状态

state = {
loading: false,
formState: {...},
error: null
}

动作创建者

const submitStart = () => {
return({
type: "SUBMIT_START"
});
};
const submitSuccess = () => {
return({
type: "SUBMIT_SUCCESS"
});
};
const submitFailure = (error) => {
return({
type: "SUBMIT_FAILURE",
payload: { error }
});
};

动作thunk

export const submitForm = () => {
return async (dispatch,getState) => {

dispatch(submitStart());
try {
await callApiToSubmitForm();
dispatch(submitSuccess());
}
catch(err) {
dispatch(submitFailure(err.msg));
}
};
};

减速器

function reducer(state,action) => {
switch (action.type) {

case "SUBMIT_START" : {
return({
...state,
loading: true
}); 
}
case "SUBMIT_SUCCESS" : {
return({
...state,
loading: false,
formState: {...}   // RESET FORM STATE HERE
});
}
case "SUBMIT_FAILURE" : {
return({
...state,
loading: false,
error: action.payload.error
});
}
}
}