Реакция локального состояния Redux из Syn c в хранилище Redux

Question

Я разрабатываю приложение React-Redux, в котором у меня есть форма для редактирования некоторых данных.

Я настроил компонент так, чтобы входные изменения сохранялись в локальном состоянии с помощью событий onChange. При отправке формы запускается действие, отправляющее содержимое локального состояния (отредактированные данные) для сохранения в хранилище Redux и в базу данных бэкэнда.

Моя проблема заключается в том, что если код бэкэнда не может зафиксировать изменения, базы данных (например, проблема с подключением) и отправляет данные обратно, как это было до редактирования, я могу сбросить хранилище Redux до значений до редактирования, но локальное состояние не обновляется, и форма продолжает отображать отредактированные данные, которые теперь не совпадают c с хранилищем 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;
    }