如何在React Redux中有效地应用Google Distance Matrix服务？

如何解决如何在React Redux中有效地应用Google Distance Matrix服务？

我正在获取包含送货车辆当前位置和订单目的地的订单列表，并在Redux Store中存储列表。

当前，我已经在组件中实现了距离矩阵服务，并在App.js文件中执行了该服务，并逐个传递每个订单并使用回调更新了订单。

有什么有效的方法吗？

将订单映射到距离矩阵组件，而不是在App.js中呈现：

distanceMatrix = this.props.orders.map((order,index) => {
    return (
        <DistanceMatrix
            key={index}
            order={order}
            orderIndex={index}
            callbackMethod={this.props.orderDistanceUpdate} />
    );
});

这是距离矩阵分量：

const DistanceMatrix = (props) => {

    return (
        <LoadScript
            googleMapsApiKey = {process.env.REACT_APP_GOOGLE_KEY} >
            <DistanceMatrixService
                options={{
                        destinations: [{lat: +props.order.vehicle_lat,lng: +props.order.vehicle_lon}],origins: [{lng: +props.order.order_lon,lat: +props.order.order_lat}],travelMode: "DRIVING",}}
                callback = {(response,status) => {
                    const modResponse = {
                        planned_arrival: formatRelative(Date.parse(props.order.planned_arrival),new Date()),estimated_arrival: formatRelative(addSeconds(new Date(),response.rows[0].elements[0].distance.value),estimated_distance: (response.rows[0].elements[0].distance.value / 1000).toFixed(1) + " KM",destination_addresses: response.destinationAddresses[0],origin_addresses: response.originAddresses[0],};
                    return props.callbackMethod(props.orderIndex,props.order.order_id,modResponse);
                }}
                />
        </LoadScript>
    );
};