使用createapi（）回滚的redux查询依赖性突变（）

Question

如果第一个成功，我有两个突变需要一个接一个地发生。作为奖励，如果第二个失败，我想撤消第一个突变。

我的第一部分正常工作，但感觉笨拙，我想知道是否有更好的方法。

这是我带来两个突变的方式：

const [updateSubscription, {
    isLoading: isLoadingUpdateSubscription,
    isSuccess: isSuccessUpdatedSubscription,
    isError: isErrorUpdateSubscription,
    error: errorUpdateSubscription,
    reset: resetUpdateSubscription
}] = useUpdateSubscriptionMutation();
const [updateDeviceListing, {
    isLoading: isLoadingUpdateDeviceListing,
    isSuccess: isSuccessUpdatedDeviceListing,
    isError: isErrorUpdateDeviceListing,
    error: errorUpdateDeviceListing,
    reset: resetUpdateDeviceListing
}] = useUpdateDeviceListingMutation();

作为按钮单击的一部分，我运行了更新订阅的第一个突变：

const handleListIt = () => {
    if (deviceListing && subscriptions) {
        const updatedAvailableSeats = subscriptions[0].availableSeats - deviceListing.count;
        const updatedUsedSeats = subscriptions[0].usedSeats + deviceListing.count;

        updateSubscription({...subscriptions[0], availableSeats: updatedAvailableSeats, usedSeats: updatedUsedSeats});
    }
};

然后，我使用useFect（）检查issuccessupdatedsubscription并运行第二个突变：

useEffect(() => {
    if (isSuccessUpdatedSubscription && deviceListing) {
        updateDeviceListing({...deviceListing, status: 'open'})
    }
    if (isSuccessUpdatedDeviceListing) {
        onClosed();
    }
}, [isSuccessUpdatedDeviceListing, isSuccessUpdatedSubscription, deviceListing, onClosed, updateDeviceListing]);

也使用了相同的使用effect（）为了检查第二个突变是否有效，请使用IssucCessupDevicElisting，此时调用了（），并显示了用户一些不同的UI。

Answer 1

您只能在handlelistit中处理这两个，实际上没有充分的理由对使用效率进行重新渲染。然后，您还可以按照需要处理回滚。

const handleListIt = async () => {
    if (deviceListing && subscriptions) {
        const updatedAvailableSeats = subscriptions[0].availableSeats - deviceListing.count;
        const updatedUsedSeats = subscriptions[0].usedSeats + deviceListing.count;

        try {
          await updateSubscription({...subscriptions[0], availableSeats: updatedAvailableSeats, usedSeats: updatedUsedSeats}).unwrap();
          await updateDeviceListing({...deviceListing, status: 'open'}).unwrap()
       } catch (error) {
         // do your rollback
       }
    }
};