I'm currently working on integrating the Redux state library with my ASP.NET MVC application using TypeScript and RequireJS.
For this simple application, I have set up a new ASP.NET MVC Project and stripped it down to only include the necessary node modules (Redux, RequireJS) along with a script file (Question.ts) which compiles to Question.js.
Question.ts
require.config({
baseUrl: "/node_modules/",
paths: {
"redux": "redux/dist/redux.js"
}
});
import { combineReducers, createStore } from "redux";
const ADD_SELECTED_ANSWER = 'ADD_SELECTED_ANSWER';
function addSelectedAnswer(selectedQuestionId: number) {
return { type: ADD_SELECTED_ANSWER, selectedQuestionId }
}
function selectedAnswers(state = [], action) {
switch (action.type) {
case ADD_SELECTED_ANSWER:
var nextState = state;
nextState.push(state);
return nextState;
default:
return state;
}
}
var questionApp = combineReducers({
SelectedAnswers: selectedAnswers
});
var store = createStore(questionApp);
// Log the initial state
console.log(store.getState());
// Log the state every time it changes
// The subscribe() method returns a function to unregister the listener
let unsubscribe = store.subscribe(() =>
console.log(store.getState())
);
store.dispatch(addSelectedAnswer(100));
TypeScript compiles this to the following (Question.js):
define(["require", "exports", "redux"], function (require, exports, redux_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require.config({
baseUrl: "./",
paths: {
"redux": "/node_modules/redux/dist/redux.js"
}
});
var ADD_SELECTED_ANSWER = 'ADD_SELECTED_ANSWER';
function addSelectedAnswer(selectedQuestionId) {
return { type: ADD_SELECTED_ANSWER, selectedQuestionId: selectedQuestionId };
}
function selectedAnswers(state, action) {
if (state === void 0) { state = []; }
switch (action.type) {
case ADD_SELECTED_ANSWER:
var nextState = state;
nextState.push(state);
return nextState;
default:
return state;
}
}
var questionApp = redux_1.combineReducers({
SelectedAnswers: selectedAnswers
});
var store = redux_1.createStore(questionApp);
// Log the initial state
console.log(store.getState());
// Log the state every time it changes
// The subscribe() method returns a function to unregister the listener
var unsubscribe = store.subscribe(function () {
return console.log(store.getState());
});
store.dispatch(addSelectedAnswer(100));
});
//# sourceMappingURL=Question.js.map
Upon navigating to the Home controller at http://localhost:50830/, the script should import Redux and perform a basic dispatch of a Redux method to modify the state.
However, I encountered the following error during execution:
require.js:168 Uncaught Error: Script error for "redux", needed by: Question
Despite trying various configurations for the import statement, RequireJS basePath, and paths configuration, I'm unable to get TypeScript to compile in a way that makes it locate the Redux module.
The view consists of:
Index.cshtml
@{
ViewBag.Title = "Home Page";
}
Please execute my Redux!
@section scripts
{
<script data-main="/Scripts/Question.js" src="~/node_modules/requirejs/require.js"></script>
}
Here is the solution structure:
https://i.sstatic.net/a0IUF.jpg
How can I ensure that TypeScript compiles my Question.ts file to correctly load redux.js?
Access the solution file at: