如何重构此调用刷新状态

Question

我想知道如何改善此调用，以免始终重复相同的句子以刷新状态...
我不需要任何巨大的重构，只有类似的输入：您需要将此呼叫放入功能中，并在需要时给它打电话...类似的东西...

export const CategoriesPage = () => {
  const [categories, setCategories] = useState<Category[]>([]);
  const [showModal, setShowModal] = useState(false);

  const handleCreateCategory = (newCategory: CategoryCreate, file: File) => {
    createCategoryHelper(newCategory, file)
      .then(() => {
        getCategoriesHelper().then(setCategories);
      })
      .finally(() => handleClose());
  };

  const handleDeleteCategory = (categoryId: Id) => {
    SwalHelper.delete().then(() => {
      deleteCategoryHelper(categoryId).then(() =>
        getCategoriesHelper().then(setCategories)
      );
    });
  };

  const handleClose = () => {
    setShowModal(false);
  };

  const handleModal = () => {
    setShowModal(true);
  };

  useEffect(() => {
    getCategoriesHelper().then(setCategories);
  }, []);

  return (
    <>
      <PageTitle title="Categories" />
      <FilterBar>
        <Button type="button" background="green" onClick={handleModal}>
          + Add new
        </Button>
      </FilterBar>
      {showModal && (
        <ModalPortal onClose={handleClose}>
          <CreateCategoryForm
            createCategory={(category, file: File) => {
              handleCreateCategory(category, file);
            }}
          />
        </ModalPortal>
      )}

      <ListGrid columns={3}>
        {categories.map((category) => {
          const { id: categoryId } = category;
          return (
            <CategoryCard
              key={categoryId}
              {...category}
              onClick={() => handleDeleteCategory(categoryId)}
            />
          );
        })}
      </ListGrid>
    </>
  );
};

1. 当组件为 安装 ，在使用效果上，为了创建列表而填充状态。
2. 当类别是 创建 时，我再次致电SetState以刷新列表。
3. 在 delete 上相同，然后再次刷新以更新列表。

三次调用同一句子

getCategoriesHelper().then(setCategories)

这是GetCategoriesHelper：

export const getCategoriesHelper = async () => {
  const service = new CategoryServiceImplementation(apiConfig);
  const uploadImageService = new AmplifyS3Service();
  const repository = new CategoryRepositoryImplementation(
    service,
    uploadImageService
  );
  const useCase = new GetCategoriesUseCaseImplementation(repository);
  return await useCase.getCategories();
};

有什么方法可以使此代码更加干净，可重复使用？
提前致谢！

Answer 1

一切都是写的，所有呼叫都是旨在做的