mapStateToProps неопределенное значение состояния, от реагирующего компонента

Question

Это новый проект, который я взял на себя, впервые работая с кем-то, кто использует код, поэтому я чувствую, что где-то упускаю часть головоломки, разработчик кодовой базы является подрядчиком и не очень хорош в связи. 1001 *

У меня есть мой реактивный компонент здесь

 type TasksProps = TasksState.TasksState & MetadataState.MetadataState & typeof TasksState.actionCreators & RouteComponentProps<{}>;

class Tasks extends React.Component<TasksProps, {}> {
    constructor(props) {
        super(props);
        this.setDates = this.setDates.bind(this);
    }

    setDates(event, picker) {
        this.setState({ startDate: picker.startDate.toDate(), endDate: picker.endDate.toDate() });
    }

    public render() {
        return <div data-w-tab="Tasks" className="frame-pane w-tab-pane w--tab-active">
            <div className="filter-container vertical">
                <div className="filter-row">
                    <DateRangePicker startDate={moment((this.state as any).startDate)} endDate={moment((this.state as any).endDate)} onApply={this.setDates}
                        ranges={{
                            'Today': [moment(), moment()],
                            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                            'This Month': [moment().startOf('month'), moment().endOf('month')],
                            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
                            'Last 12 Months': [moment().subtract(12, 'month'), moment()],
                        }}>
                        <div className="input-container">
                            <img src="../ClientApp/images/Calendar.png" width="16" alt="" className="calendar-icon" />
                            <div className="search-label">
                                {moment((this.state as any).startDate).format("DD MMM YY") + " to " + moment((this.state as any).endDate).format("DD MMM YY")}
                            </div>
                        </div>
                    </DateRangePicker>

                </div>

            </div>
        </div>
    }
}


function mapStateToProps(state) {
    return { tasksData: state.tasks.tasksData, metadata: state.metadata.metadata }; // taskData undefined ??
}

export default connect(mapStateToProps as any, TasksState.actionCreators)(Tasks) as typeof Tasks; 

Который говорит с моим файлом редуктора

    export interface TasksState {
    tasksData: any;
}

interface ReceiveTasksDataAction {
    type: 'RECEIVE_TASKS_DATA';
    tasksData: any;
}

type KnownAction = ReceiveTasksDataAction;



export const actionCreators = {
    requestData: (notify: boolean, self: any): AppThunkAction<KnownAction> => (dispatch, getState) => {
        $("#block-ui-container").css('visibility', 'visible');
        $.ajax({
            url: '/api/tasks',
            method: "POST",
            data: {
                StartDate: self.state.startDate.toDateString(),
                EndDate: self.state.endDate.toDateString(),
                OrchardId: $("#OrchardId").length > 0 ? $("#OrchardId").val() : "",
                SiteId: $("#SiteId").length > 0 ? $("#SiteId").val() : "",
                BlockId: $("#BlockId").length > 0 ? $("#BlockId").val() : "",
                AreaId: $("#AreaId").length > 0 ? $("#AreaId").val() : "",
                Row: $("#Row").length > 0 ? $("Row").val() : "",
                TaskType: $("#TaskType").length > 0 ? $("#TaskType").val() : "",
                SubType: $("#SubType").length > 0 ? $("#SubType").val() : "",
                SubSubType: $("#SubSubType").length > 0 ? $("#SubSubType").val() : "",
                IsComplete: $("#IsComplete").length > 0 ? $("#IsComplete").val() : "",
                IsReopened: $("#IsReopened").length > 0 ? $("#IsReopened").val() : ""
            },
            headers: { 'X-XSRF-Token': $('input[name="__RequestVerificationToken"]').val() }
        }).then(function (response) {
            dispatch({
                type: 'RECEIVE_TASKS_DATA',
                tasksData: response.response
            });

            if (!self.props.metadata.Loading && (self.props as any).history.location.pathname.indexOf('payroll') >= 0) {
                $("#block-ui-container").css('visibility', 'hidden');
            }
            if (notify) {
                Utils.showToast('Filter applied', false);
            }
        }).catch(function (error) {
            $("#block-ui-container").css('visibility', 'hidden');
            if (error.status == 403) {
                Cookies.remove("LOGIN");
                (self.props as any).history.push('/not-logged-in');
            }
            else {
                var status = error.status ? "Error " + error.status + ": " + error.statusText : error.toString();
                Utils.showToast(status, true);
                console.log(status);
            }
        });
    },
    clearData: (): AppThunkAction<KnownAction> => (dispatch, getState) => {
        dispatch({
            type: 'RECEIVE_TASKS_DATA',
            tasksData: unloadedState.tasksData
        });
    }
}

const unloadedState: TasksState = {
    tasksData: null
};

export const reducer: Reducer<TasksState> = (state: TasksState, incomingAction: Action) => {
    const action = incomingAction as KnownAction;
    switch (action.type) {
        case 'RECEIVE_TASKS_DATA':
            return {
                tasksData: action.tasksData
            };
    }
    return state || unloadedState;
};

Сейчас компонент реагирования не рендерится ... полная ошибка

TypeError: Cannot read property 'tasksData' of undefined
    at Function.mapStateToProps [as mapToProps] (Tasks.js:49)

Что относится к компоненту реагирования, однако я думаю, что сама ошибка может быть в файле редуктора?