Disable Button When Deleting in Redux and React

Question

I have here a problem disabling the button when deleting. Right now, it disables all the "Delete" Button of all images. I only wanted to disable the "Delete" of the currently deleting image.| So it it will prevent from deleting it again and again while it is still processing.

Codesandbox CLICK HERE

<CardActions>
    <Button
      disabled={isDeletingImages}
      variant="contained"
      size="medium"
      color="primary"
      type="button"
      onClick={() => confirmDeleteProductImage(productType?.imageFileName)}
    >
      Delete
    </Button>
  </CardActions>

Answer 1

When DELETE_PRODUCT_IMAGE_REQUEST is being dispatched, you could add the image file name as additional payload to the action (I'm assuming that the file name uniquely identifies the thing that is being deleted).

In the reducer, read the image file name from the action payload and mutate the state so that it reflects which specific images are in the process of being deleted. For example with an object that contains the image file name as a key and true as value.

export const initialState = {
  products: [],
  errors: [],
  imagesInDeletion: {
    // example entry: 'nameofimage.jpg': true,
  },
};

imagesInDeletion now tells you which image is in the process of being deleted. You can write a selector based on it, something like isImageBeingDeleted('nameofimage.jpg') and let it return true or false. The selector can then be used for the disabled prop of the button.

In addition there'd be some work to do in the reducer to update this state properly. If an image was successfully deleted, it should be removed from imagesInDeletion, for example.

This is one possible way of solving this, but the core of the problem is that you need a more detailed state for each product/image that tracks the lifecycle of image deletion. Sometimes re-modelling the state to facilitate that can also be a good approach.