如何将ASP.NET Core MVC控制器的AppSettings传递给ReactJS/Redux客户端应用

我来帮你搞定把AppSettings里的ApiUrl注入到React/Redux状态的问题～下面是一步步的实操方案：

你已经在视图里注入了IConfiguration，接下来可以通过两种方式把配置传递给React应用：

方式A：定义全局window变量（简单直接） #

在你的MVC视图里，<div id="react-app">标签后面添加这段代码，把ApiUrl挂载到window对象上：

<script>
  window.appSettings = {
    apiUrl: '@Configuration["ApiUrl"]'
  };
</script>

这样React就能直接读取window.appSettings.apiUrl了。

方式B：通过预渲染模块传递props（更优雅） #

如果用了ASP.NET Core的预渲染功能，可以把配置作为props传入React组件。先修改视图里的预渲染属性：

<div id="react-app" 
     asp-prerender-module="ClientApp/dist/main-server"
     asp-prerender-data='new { apiUrl = Configuration["ApiUrl"] }'>
</div>

然后在预渲染入口文件（比如main-server.js）里，接收数据并传递给根组件：

export default function renderToString({ data }) {
  const app = <App apiUrl={data.apiUrl} />;
  return ReactDOMServer.renderToString(app);
}

拿到ApiUrl后，我们可以通过两种方式把它放进Redux状态：

方式1：初始化Store时传入（适合静态配置） #

在创建Redux Store的时候，把ApiUrl作为初始状态的一部分：

// store.js
import { createStore } from 'redux';
import rootReducer from './reducers';

// 从全局变量或props获取apiUrl
const initialState = {
  appConfig: {
    apiUrl: window.appSettings?.apiUrl || ''
  }
};

export const store = createStore(rootReducer, initialState);

对应的reducer要处理这个初始状态：

// reducers/appConfig.js
const initialState = { apiUrl: '' };

export default function appConfigReducer(state = initialState, action) {
  // 后续需要更新配置时可以加action逻辑，先保留初始状态处理
  return state;
}

方式2：通过Action设置配置（适合动态场景） #

如果需要在组件挂载后设置，或者配置可能动态变化，可以创建action来更新状态：

// actions/appConfigActions.js
export const SET_API_URL = 'SET_API_URL';

export const setApiUrl = (apiUrl) => ({
  type: SET_API_URL,
  payload: apiUrl
});

然后在reducer里处理这个action：

// reducers/appConfig.js
const initialState = { apiUrl: '' };

export default function appConfigReducer(state = initialState, action) {
  switch(action.type) {
    case 'SET_API_URL':
      return { ...state, apiUrl: action.payload };
    default:
      return state;
  }
}

最后在根组件（比如App.js）里，拿到ApiUrl后dispatch这个action：

// App.js
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import { setApiUrl } from './actions/appConfigActions';

function App(props) {
  const dispatch = useDispatch();
  const apiUrl = props.apiUrl || window.appSettings?.apiUrl;

  useEffect(() => {
    if (apiUrl) {
      dispatch(setApiUrl(apiUrl));
    }
  }, [dispatch, apiUrl]);

  // 组件其余业务逻辑...
}

• 确保AppSettings.json里存在对应的配置项，比如：

{
  "ApiUrl": "https://your-api-domain.com/api/"
}

• ASP.NET Core会自动加载对应环境的配置文件（比如AppSettings.Development.json），不用手动切换环境配置。
• 不要在Redux代码里硬编码ApiUrl，保持配置的可维护性。

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