score:2

Accepted answer

It took a bit to figure out but here is the solution.

  1. If you have not created a Reducer for Redux to store generic app settings create one. Here is my 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/"
  };
};

  1. After Creating the reducer and hooking it into the allReducers list you need to edit boot-server.tsx. After boot-server creates the state you can dispatch anything you need to. Here I grab the data from the asp-prerender-data tag I set in my MVC view.

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

score:0

This other answer worked for me, I just had to add a const service class that would read this values How to push configuration values from Asp.Net Core MVC 2.0 config file to React TypeScript client script?

class ConfigService {
    Uri: string;

    public initialize(): void {
        if (this.Uri) return;
        var ell = document.getElementById('site-props');
        var jsontext = ell!.innerText;
        var siteProps = JSON.parse(jsontext);
        this.Uri = siteProps.Uri;
    } 
}

const configService = new ConfigService();
export default configService;

Related Query

More Query from same tag