反应Redux本地状态与Redux存储不同步

Question

我正在设计一个React-Redux应用程序，其中有一个表单可以编辑一些数据。

我已经设置了组件，以便通过onChange事件将输入更改保持在本地状态。 在表单提交时，将触发一个操作，发送要存储在Redux存储和后端数据库中的本地状态内容（编辑的数据）。

我的问题是，如果后端代码无法将更改提交到数据库（例如，连接问题），并且无法像编辑之前一样发送回数据，则可以将Redux存储重置为之前的值编辑，但是本地状态不会更新，并且表单会继续显示已编辑的数据，现在这些数据与Redux存储和数据库不同步。

我在做错什么吗？ 谢谢您的帮助

组件

class UpdateFormContent extends React.Component<TaskAppUpdateFormContentProps, TaskAppUpdateFormContentState> {
    constructor(props: TaskAppUpdateFormContentProps) {
        super(props)
        const { taskApp } = this.props;
        this.state = {
            editedTaskApp: { ...taskApp }
        }
    }

    handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        event.preventDefault();
        let newTaskApp: Model.TaskApp = { ...this.state.editedTaskApp };
        switch (event.target.name) {
            case 'taskAppBody': newTaskApp.taskAppBody = event.target.value; break;
            case 'taskAppFileNm': newTaskApp.taskAppFileNm = event.target.value; break;
            case 'taskAppLabel': newTaskApp.taskAppLabel = event.target.value; break;
            case 'taskAppNm': newTaskApp.taskAppNm = event.target.value; break;
        }

        this.setState({ editedTaskApp: newTaskApp });
    }

    handleSubmitClick = (event: React.MouseEvent) => {
        event.preventDefault();
        // Edited for brevity: this action is called in a container component
        this.props.updateTaskApp(this.state.editedTaskApp); 
    }

    render() {

        const editedTaskApp = this.state.editedTaskApp;

        return (
            <div>
                <Form>
                    <Row form>
                        <Col>
                            <FormGroup id="updateForm.Name">
                                <Label>TaskApp name</Label>
                                <Input type="text" name="taskAppNm" value={editedTaskApp.taskAppNm || ''} onChange={this.handleInputChange} />
                            </FormGroup>
                        </Col>
                        <Col>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormGroup id="updateForm.FileName">
                                <Label>File name</Label>
                                <Input type="text" value={editedTaskApp.taskAppFileNm || ''} name="taskAppFileNm" onChange={this.handleInputChange} />
                            </FormGroup>
                        </Col>
                        <Col>
                            <FormGroup id="updateForm.Label">
                                <Label>Label</Label>
                                <Input type="text" value={editedTaskApp.taskAppLabel || ''} name="taskAppLabel" onChange={this.handleInputChange} />
                            </FormGroup>
                        </Col>
                    </Row>
                    <Row>
                        <Col>
                            <FormGroup id="updateForm.Body">
                                <Label>Body</Label>
                                <Input type="text" value={editedTaskApp.taskAppBody || ''} name="taskAppBody" onChange={this.handleInputChange} />
                            </FormGroup>
                        </Col>
                    </Row>
                    <Row>
                        <Col className="text-center">
                            <Button color="primary" onClick={this.handleSubmitClick}>Submit</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
        );
    }
} 

操作

export const updateTaskApp = (editedTaskApp: Model.TaskApp) => (dispatch: any) => {

    dispatch({
        type: 'UPDATE_TASKAPP_REQUEST',
        payload: editedTaskApp
    });

    const url: string = 'api/TaskApp/SaveTaskApp';
    const options = {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json;charset=UTF-8'
        },
        body: JSON.stringify(editedTaskApp)
    };

    fetch(url, options)
        .then(Utils.handleErrors)
        .then(response => response.json())
        .then((taskApp: Model.webAPIReturnModel<Model.TaskApp>) => {
            if (taskApp.success) {
                dispatch({
                    type: 'UPDATE_TASKAPP_SUCCESS',
                    payload: taskApp.content
                });
            } else {
                dispatch({
                    type: 'UPDATE_TASKAPP_FAILURE',
                    payload: taskApp.exception.message
                });
            }
        })
        .catch(error => {
            dispatch({
                type: 'UPDATE_TASKAPP_FAILURE',
                payload: error.message
            });
        });
};

减速器

    const action = incomingAction as KnownAction;
    switch (action.type) {

        case 'UPDATE_TASKAPP_REQUEST':
            let newTaskAppsByIdRequest = { ...state.taskAppsById };
            newTaskAppsByIdRequest[action.payload.taskAppId] = action.payload;
            return {
                ...state,
                taskAppsById: newTaskAppsByIdRequest,
                taskAppListLatestUpdateDate: new Date()
            };

        case 'UPDATE_TASKAPP_SUCCESS':
            let newTaskAppsById = { ...state.taskAppsById };
            newTaskAppsById[action.payload.taskAppId] = action.payload;
            return {
                ...state,
                taskAppsById: newTaskAppsById,
                taskAppListLatestUpdateDate: new Date()
            };

        case 'UPDATE_TASKAPP_FAILURE':
            return state;

        default:
            return state;
    }