在React Admin同一页面实现配送路线关联站点的实时CRUD操作

我正在用React Admin构建配送路线系统，每个配送路线包含多个配送站点，数据库表结构如下：

Table: delivery_routes
Columns: id, name

Table: delivery_routes_stops
Columns: id, name, delivery_route_id, latitude, longitude

我已经在React Admin中创建了名为Delivery Routes的资源，支持对delivery_routes记录的编辑操作，页面保存时会向/api/delivery-routes/{delivery_route_id}发送RESTful API请求。

当前编辑页已集成Google Maps，用户可在地图上添加标记，每个标记对应一条delivery_routes_stop关联记录。我需要实现：标记操作发生时立即执行CRUD操作，无需等待手动保存，且所有操作在同一页面完成。

具体操作流程示例：

• 用户点击配送路线记录，打开编辑页
• 用户在Google Maps上创建新标记，React Admin立即向/api/delivery-routes/{delivery_route_id}/delivery-routes-stops发送POST请求，携带标记的位置等数据
• 用户拖动标记到新位置，React Admin立即向/api/delivery-routes/{delivery_route_id}/delivery-routes-stops/{delivery_routes_stops_id}发送PATCH请求，更新经纬度信息
• 用户删除标记，React Admin立即向/api/delivery-routes/{delivery_route_id}/delivery-routes-stops/{delivery_routes_stops_id}发送DELETE请求

内容的提问来源于stack exchange，提问作者Snessy