JHipster React 在另一个相关实体的详细信息屏幕中显示一个实体的列表

Question

我正在尝试使用 JHipster 7.0.1 (Azul JDK 11) 和 ReactJS 作为前端的应用程序。

我的 JDL 中有 2 个实体 - Domain 和 BadgeCategory 相关，如下所示

relationship OneToMany {
    Domain{badgeClass required} to BadgeCategory{domain(name) required}

我希望能够在域详细信息屏幕中显示特定域的所有 BadgeCategories。

为此，我在存储库中创建了一个新方法 BadgeCategoryRepository.java

@Repository
public interface BadgeCategoryRepository extends JpaRepository<BadgeCategory, Long> {
    List<BadgeCategory> findByDomainId(Long id);
}

然后在BadgeCategoryResource.java

中添加了一个新端点

@GetMapping("/badge-categories-domain/{id}")
public ResponseEntity<List<BadgeCategory>> getAllBadgeCategoriesForDomain(@PathVariable Long id) {
    log.debug("REST request to get BadgeCategories for Domain : {}", id);
    List<BadgeCategory> badgeCategory = badgeCategoryRepository.findByDomainId(id);
    return ResponseEntity.ok().body(badgeCategory);
}

现在来到 React 部分，我在 badge-category.reducer.ts

中添加了一个常量

export const getEntitiesForDomain = createAsyncThunk(
  'badgeCategory/fetch_entity_list_for_domain', 
  async (id: string) => {
    const requestUrl = `api/badge-categories-domain/${id}`;
    alert(JSON.stringify(axios.get<IBadgeCategory[]>(requestUrl)));
    return axios.get<IBadgeCategory[]>(requestUrl);
  });

然后我在 Domain Detail 屏幕组件中使用这个 reducer domain-detail.tsx

import { getEntity as getBadgeCategory, getEntitiesForDomain } from '../badge-category/badge-category.reducer';

  const domainEntity = useAppSelector(state => state.domain.entity);
  const badgeCategoryList = useAppSelector(state => state.badgeCategory.entities);

  useEffect(() => {
    dispatch(getEntity(props.match.params.id));
    dispatch(getEntitiesForDomain(props.match.params.id));
  }, []);

我期望常量 badgeCategoryList 包含在域详细信息屏幕中引用的域的所有徽章类别的列表。但我在 return.

中什么也得不到

在检查流程时，我看到端点正在被命中，Java 代码正在生成响应，但 UI 代码无法使用它。

导致此问题的原因是我在这里遗漏了什么？

Swagger 文档显示来自 Java 代码的预期响应

Answer 1

所以问题是新的 API 调用没有在 reducer 的 slice 部分注册。我必须对切片进行以下添加，效果非常好

.addMatcher(isFulfilled(getEntitiesForDomain), (state, action) => {
   return {
     ...state,
     loading: false,
     entities: action.payload.data,
   };
})

JHipster React 在另一个相关实体的详细信息屏幕中显示一个实体的列表

JHipster React Show List Of One Entity in Details Screen of Another Related Entity

java

spring

jhipster

react-redux