如何将AppSettings从ASP.NET Core MVC控制器传递到ReactJS / Redux ClientApp？

Question

我试图弄清楚如何从AppSettings.json中获取ApiUrl设置到ReactJS / Redux状态。

我发现以下文章，但是，它是针对Angular的。 https://elanderson.net/2017/10/pass-asp-net-core-appsettings-values-to-angular/

我可以使用该示例将我的MVC页面更改为：

@using Microsoft.Extensions.Configuration @inject IConfiguration Configuration @{ ViewData["Title"] = "Home Page"; }

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

@section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}

这是我的AppSettings.json：

{
  "ApiUrl": "http://localhost:55556/",
  "Logging": {
    "LogLevel": {
      "Default": "Debug",
      "System": "Information",
      "Microsoft": "Information"
    }
  }
}

我想将ApiUrl参数从我的AppSettings发送到ApplicationState并从我的ReactJS TypeScript组件访问它。

我使用命令创建了这个应用程序，dotnet new reactredux而我对ReactJS和Redux还是很陌生。

Answer 1

花了一些时间才弄清楚，但这是解决方案。

1. 如果您尚未为 Redux 创建一个Reducer 来存储通用应用程序设置，请创建一个。这是我的减速器：

import {
  Action,
  Reducer
} from 'redux';

// -----------------
// STATE - This defines the type of data maintained in the Redux store.

export interface AppSettingsState {
  ApiUrl: string
}

// -----------------
// ACTIONS - These are serializable (hence replayable) descriptions of state transitions.
// They do not themselves have any side-effects; they just describe something that is going to happen.
// Use @typeName and isActionType for type detection that works even after serialization/deserialization.

export interface SetApiUrlAction {
  type: 'SET_APIURL';
  apiUrl: string
}

// Declare a 'discriminated union' type. This guarantees that all references to 'type' properties contain one of the
// declared type strings (and not any other arbitrary string).
type KnownAction = SetApiUrlAction;

// ----------------
// ACTION CREATORS - These are functions exposed to UI components that will trigger a state transition.
// They don't directly mutate state, but they can have external side-effects (such as loading data).

export const actionCreators = {
  setApiUrl: (url: string) => < SetApiUrlAction > {
    type: 'SET_APIURL',
    apiUrl: url
  }
};

// ----------------
// REDUCER - For a given state and action, returns the new state. To support time travel, this must not mutate the old state.

export const reducer: Reducer < AppSettingsState > = (state: AppSettingsState, incomingAction: Action) => {
  const action = incomingAction as KnownAction;

  switch (action.type) {
    case 'SET_APIURL':
      return {
        ApiUrl: action.apiUrl
      };
    default:
      // The following line guarantees that every action in the KnownAction union has been covered by a case above
      const exhaustiveCheck: never = action.type;
  }

  // For unrecognized actions (or in cases where actions have no effect), must return the existing state
  //  (or default initial state if none was supplied)
  return state || {
    ApiUrl: "http://localhost:5001/"
  };
};

2. 创建reducer并将其挂接到allReducers列表后，您需要编辑boot-server.tsx。引导服务器创建状态后，您可以调度您需要的任何内容。在这里，我从 MVC 视图中设置的 asp-prerender-data 标记中获取数据。

store.dispatch({ type: 'SET_APIURL', apiUrl: params.data.apiUrl });