Как правильно выбрать данные для Kendo Grid, используя React с Redux и Thunk Middleware?

Question

Я использую Kendo React Grid в моем React с Redux и Thunk Middleware, приложением ASP.NET Core. Я управляю состоянием сетки с использованием избыточности, но я изо всех сил пытаюсь получить данные и спрашиваю себя, может ли кто-нибудь указать мне правильное направление.

В моем приложении есть пара редукторов, которые управляют как данными сетки, так и параметрами данных сетки, т.е. {take: 4, skip: 0}. Когда вызывается vesselStateReducer, он пытается установить начальное состояние сетки как данные, возвращаемые моей функцией fetch.

Проблема в том, что я не могу правильно запустить функцию извлечения, и мне нужна помощь.

Вот мой код.

SRC / компоненты / суда / VesselContainer.js

import React from 'react';
import { connect } from 'react-redux';
import { addVessel, dataStateChange } from '../../store/actions/vesselGridActions';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { process } from '@progress/kendo-data-query';

class VesselsContainer extends React.Component {
    addVessel = () => {
        this.props.addVessel();
    }
    handleStateChange = (event) => {
        this.props.dataStateChange(event);
    }
    render() {
        console.log(this.props)
        const ProcessedVessels = process(this.props.GridData, this.props.GridState);
        return (
            <div className="grid-container">
                <Grid
                    data={ProcessedVessels}
                    total={this.props.GridData.length}
                    pageable={true}
                    sortable={true}
                    filterable={false}
                    onDataStateChange={this.handleStateChange}
                    editField="inEdit"
                    {...this.props.dataState}>
                    <GridToolbar>
                        <button
                            title="Add Vessel"
                            className="k-button k-primary"
                            onClick={this.addVessel}>
                            Add New
                        </button>
                    </GridToolbar>
                    <Column field="Id" title="Id" editable={false} />
                    <Column field="VesselName" title="Name" />
                    <Column field="IMO" title="IMO" />
                </Grid>
            </div>
        );
    }
}
const mapDispatchToProps = dispatch => {
    return {
        addVessel: () => dispatch(addVessel()),
        dataStateChange: (event) => dispatch(dataStateChange(event))
    }
}
const mapStateToProps = (state) => {  
    return {
        GridData: state.vesselGridData.vessels,
        GridState: state.vesselGridState
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(VesselsContainer);

ЦСИ / магазин / действия / vesselGridActions.js

export const ADD_VESSEL = 'ADD_VESSEL';
export const DATASTATE_CHANGE = 'DATASTATE_CHANGE';
export const FETCH_VESSELS_BEGIN = 'FETCH_VESSEL_BEGIN';
export const FETCH_VESSELS_SUCCESS = 'FETCH_VESSEL_SUCCESS';
export const FETCH_VESSELS_FAILURE = 'FETCH_VESSEL_FAILURE';


export function addVessel(payload) {
    return {
        type: ADD_VESSEL,
        payload
    }
}
export function dataStateChange(payload) {
    console.log(payload)
    return {
        type: DATASTATE_CHANGE,
        payload
    }
}
export const actionCreators = {
    fetchVesselsBegin: () => ({
        type: FETCH_VESSELS_BEGIN
    }),
    fetchVesselsSuccess: (vessels) => ({
        type: FETCH_VESSELS_SUCCESS,
        payload: { vessels }
    }),
    fetchVesselsFailure: (error) => ({
        type: FETCH_VESSELS_FAILURE,
        payload: { error }
    })
};

ЦСИ / магазин / редукторы / vesselGridReducer.js

import { ADD_VESSEL, DATASTATE_CHANGE } from '../actions/vesselGridActions';
import { toDataSourceRequestString, translateDataSourceResultGroups } from '@progress/kendo-data-query';

function fetchVessels() {
    const queryStr = `${toDataSourceRequestString(options)}`;
    const hasGroups = options.group && options.group.length;
    const base_url = 'api/Vessel/GetVessels';
    const init = { method: 'GET', accept: 'application/json', headers: {} };

    return fetch(`${base_url}?${queryStr}`, init)
        .then(handleErrors)
        .then(response => response.json())
        .then(({ Data }) => {
            const gridResult = ({
                result: hasGroups ? translateDataSourceResultGroups(Data) : Data,
                options
            });
            return gridResult
        })
};
export function vesselsReducer(state = { vessels: fetchVessels() }, action) {
    console.log(state)
    switch (action.type) {        
        case ADD_VESSEL:
            let makeNewId = Math.random() * new Date().getMilliseconds() * 100;
            let newVesselId = Math.floor(makeNewId);
            let vesselToAdd = { inEdit: true };
            vesselToAdd.Id = newVesselId;
            let vesselAfterAdd = state.vessels.slice();
            vesselAfterAdd.map(vessel => vessel.inEdit = false);
            vesselAfterAdd.unshift(vesselToAdd);
            return Object.assign({ vessels: vesselAfterAdd }, {});
        default:
            console.log(state)
            return state
    }
}
const options = { sort: [], filter: [], skip: 0, take: 10 }

export function vesselStateReducer(state = options, action) {
    switch (action.type) {
        case DATASTATE_CHANGE:
            const dataState = action.payload.data;
            console.log(dataState)
            return Object.assign({ sort: dataState.sort, filter: dataState.filter, skip: dataState.skip, take: dataState.take }, {});
        default:
            console.log(state)
            return state
    }
}

// Handle HTTP errors since fetch won't.
function handleErrors(response) {
    if (!response.ok) {
        throw Error(response.statusText);
    }
    return response;
}

ЦСИ / магазин / configureStore.js

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Sidebar from './reducers/sidebarReducer';
import * as VesselGrid from './reducers/vesselGridReducer';

export default function configureStore(history, initialState) {
    const reducers = {
        sidebar: Sidebar.reducer,
        vesselGridData: VesselGrid.vesselsReducer,
        vesselGridState: VesselGrid.vesselStateReducer
    };
    const middleware = [
        thunk,
        routerMiddleware(history)
    ];
    // In development, use the browser's Redux dev tools extension if installed
    const enhancers = [];
    const isDevelopment = process.env.NODE_ENV === 'development';
    if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
        enhancers.push(window.devToolsExtension());
    }

    const rootReducer = combineReducers({
        ...reducers,
        routing: routerReducer
    });

    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(...middleware), ...enhancers)
    );
}

Итак, vesselReducer пытается установить начальное состояние в свойстве vessels, где я ссылаюсь на мою функцию fetch(), эта функция возвращает обещание, но не данные. Это означает, что я делаю это неправильно, и мне нужна помощь, чтобы вывести мои данные и вернуть их. Любая помощь приветствуется.