单片 JHipster React 前端应用程序属性答案

【问题标题】：Monolithic JHipster React Front End Application Properties单片 JHipster React 前端应用程序属性
【发布时间】：2021-05-15 01:20:53
【问题描述】：

我正在使用 React 构建一个 JHipster Monolithic 应用程序。在后端，我可以使用 application.yml / ApplicationProperties.java 添加可能在环境（Dev、Prod 等）之间更改的属性（例如 API 密钥）。

我的问题是，我可以在 React 前端做同样的事情吗？这是一个 Spring 应用程序，因此具有相同的 application.yml 和 ApplicationProperties.java。有没有人有将自定义属性呈现到 UI 的代码示例？

我已经阅读了这篇文章 (JHipster React Front End (Gateway) Application Properties) 的答案，但它对我没有帮助，因为在我的情况下它是一个单体应用程序。

【问题讨论】：

标签： reactjs typescript webpack jhipster

【解决方案1】：

另一篇文章中的解决方案适用于单体。如需完整的解决方案，请参见下文：

首先，请确保您已配置要公开的配置。同样在ApplicationProperties.java中配置（或者将ignoreUnknownFields设置为false）：

application:
  my-value: 'TestValue'

创建一个 REST 端点以将配置值公开给客户端（根据其他答案修改）：

package com.mycompany.myapp.web.rest;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * Resource to return custom config
 */
@RestController
@RequestMapping("/api")
public class CustomConfigResource {

    @Value("${application.my-value:}")
    private String myValue;

    @GetMapping("/custom-config")
    public CustomConfigVM getCustomConfig() {
        return new CustomConfigVM(myValue);
    }

    class CustomConfigVM {
        private String myValue;

        CustomConfigVM(String myValue) {
            this.myValue = myValue;
        }

        public String getMyValue() {
            return myValue;
        }

        public void setMyValue(String myValue) {
            this.myValue = myValue;
        }
    }
}

创建一个reducer来获取和存储信息：

import axios from 'axios';

import { SUCCESS } from 'app/shared/reducers/action-type.util';

export const ACTION_TYPES = {
  GET_CONFIG: 'customConfig/GET_CONFIG',
};

const initialState = {
  myValue: '',
};

export type CustomConfigState = Readonly<typeof initialState>;

export default (state: CustomConfigState = initialState, action): CustomConfigState => {
  switch (action.type) {
    case SUCCESS(ACTION_TYPES.GET_CONFIG): {
      const { data } = action.payload;
      return {
        ...state,
        myValue: data['myValue'],
      };
    }
    default:
      return state;
  }
};

export const getConfig = () => ({
  type: ACTION_TYPES.GET_CONFIG,
  payload: axios.get('api/custom-config'),
});

最后，从组件中调用reducer的getConfig方法，例如在App.tsx中：

import { getConfig } from 'app/shared/reducers/custom-config';
...
useEffect(() => {
    props.getConfig();
  }, []);
...
const mapDispatchToProps = { getConfig };
...

【讨论】：

非常感谢。效果很好。