如何在现有ASP.NET MVC应用中集成Redux

Redux是客户端JavaScript库，完全独立于ASP.NET MVC的服务端启动逻辑（如Global.asax），无需在服务端代码中调用JS。只需在客户端页面的合适时机初始化Redux Store即可，无需引入webpack等构建工具，用原生脚本就能实现轻量集成。

具体实现步骤 #

1. 引入Redux依赖 #

前往Redux官网下载编译好的redux.min.js，将其放入项目的Scripts目录。在布局页（如_Layout.cshtml）的<head>或页面底部添加脚本引入：

<script src="~/Scripts/redux.min.js"></script>

2. 定义Reducer与初始状态 #

创建独立JS文件（如Scripts/redux-store.js），编写Reducer函数和初始状态：

// 应用初始状态
const initialState = {
    userInfo: null,
    appSettings: { theme: 'light' }
};

// Reducer：处理状态更新逻辑
function appReducer(state = initialState, action) {
    switch (action.type) {
        case 'SET_USER_INFO':
            return { ...state, userInfo: action.payload };
        case 'TOGGLE_THEME':
            return { 
                ...state, 
                appSettings: { 
                    ...state.appSettings, 
                    theme: state.appSettings.theme === 'light' ? 'dark' : 'light' 
                }
            };
        default:
            return state;
    }
}

3. 初始化Redux Store并全局挂载 #

在redux-store.js中添加Store初始化代码，将Store挂载到全局window对象，方便页面内所有脚本访问：

// 创建Redux Store
const store = Redux.createStore(appReducer);

// 挂载到全局命名空间
window.reduxStore = store;

4. 在视图页面中使用Redux #

在需要使用Redux的视图（如Home/Index.cshtml）中，通过window.reduxStore调用Redux API，实现状态订阅与Action分发：

<button id="toggle-theme-btn">切换主题</button>

<script>
    // 订阅Store状态变化，同步更新UI
    const unsubscribe = window.reduxStore.subscribe(() => {
        const currentState = window.reduxStore.getState();
        // 根据状态更新页面元素
        document.body.className = currentState.appSettings.theme;
    });

    // 绑定按钮事件，分发Action
    document.getElementById('toggle-theme-btn').addEventListener('click', () => {
        window.reduxStore.dispatch({ type: 'TOGGLE_THEME' });
    });

    // 页面卸载时取消订阅，避免内存泄漏
    window.addEventListener('beforeunload', unsubscribe);
</script>

5. 服务端初始状态注入（可选） #

若需从ASP.NET MVC服务端传递初始状态（如当前登录用户信息），可在视图中通过@Html.Raw()将服务端数据注入JS：

<script>
    // 从服务端获取初始状态
    const serverInitialState = @Html.Raw(Json.Serialize(new {
        userInfo = new { Name = User.Identity.Name, Email = User.Identity.Name }
    }));

    // 使用服务端数据作为初始状态创建Reducer
    function appReducer(state = serverInitialState, action) {
        // 保留原Reducer逻辑
        switch (action.type) {
            case 'SET_USER_INFO':
                return { ...state, userInfo: action.payload };
            case 'TOGGLE_THEME':
                return { 
                    ...state, 
                    appSettings: { 
                        ...state.appSettings, 
                        theme: state.appSettings.theme === 'light' ? 'dark' : 'light' 
                    }
                };
            default:
                return state;
        }
    }

    // 创建并挂载Store
    window.reduxStore = Redux.createStore(appReducer);
</script>

核心注意事项 #

• Redux初始化完全在客户端完成，与ASP.NET MVC服务端启动逻辑无关联，无需修改Global.asax等服务端文件。
• 无需依赖webpack等构建工具，原生JS即可完成集成，适合传统MVC项目的轻量需求。
• 若担心全局命名空间污染，可使用IIFE（立即执行函数表达式）封装Redux逻辑，仅暴露必要API。

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