JHipster React Domain详情页无法获取关联BadgeCategory列表问题

我正在使用JHipster 7.0.1（Azul JDK 11）搭配ReactJS作为前端开发应用。
我的JDL中定义了两个存在关联关系的实体Domain和BadgeCategory，关联关系如下：

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

我需要在Domain详情页中展示指定Domain对应的所有BadgeCategory数据。
为此我首先在仓库类BadgeCategoryRepository.java中新增了查询方法：

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

随后在BadgeCategoryResource.java中新增了对应REST接口：

@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);
}

后端接口经Swagger测试可正常返回预期数据。接下来是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详情页组件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常量会包含当前Domain对应的所有BadgeCategory列表，但实际返回为空。排查发现后端接口会被正常调用且返回正确数据，但前端无法正常消费响应结果。
请问我遗漏了什么配置导致该问题？

Swagger文档显示Java代码返回预期响应：

你有两处核心遗漏导致数据无法正常同步到前端state中：

1. 异步请求未加await，返回值不符合要求
   axios.get是异步方法，你直接返回的是Promise对象而非实际响应结果。同时axios返回的是封装后的响应结构体，真实业务数据存放在data属性中，需要提取后再返回。修改getEntitiesForDomain代码如下：

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

2. 未在reducer中添加对应action的处理逻辑
   你新增了自定义的thunk请求，但没有在badge-category.reducer.ts的extraReducers配置段中添加请求成功后的状态更新逻辑，所以entities字段不会被刷新。添加如下代码到对应位置即可：

.addCase(getEntitiesForDomain.fulfilled, (state, action) => {
  state.entities = action.payload;
  state.loading = false;
  state.updateSuccess = true;
})
.addCase(getEntitiesForDomain.pending, (state) => {
  state.loading = true;
  state.updateSuccess = false;
})
.addCase(getEntitiesForDomain.rejected, (state) => {
  state.loading = false;
  state.updateSuccess = false;
})

修改完成后重新编译即可正常获取到BadgeCategory列表数据。

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