AngularJS依赖注入遇上Redux中间件：解锁ng-redux可注入middleware的强大能力-平芜编程栈

【免费下载链接】ng-redux

Angular bindings for Redux

项目地址：https://gitcode.com/gh_mirrors/ng/ng-redux

ng-redux是专为 AngularJS 打造的 Redux 绑定库，它的杀手级功能是支持依赖注入（DI）风格的 Redux middleware：只要把中间件写成 Angular 服务并以字符串形式注册，$http、$q等内置服务就能直接注入到中间件内部，彻底告别手写工厂函数。

30秒认识 ng-redux

ng-redux 把 Redux 的单数据源理念带进 AngularJS 生态：

🏪 用$ngReduxProvider.createStoreWith()在应用 config 阶段创建 store；
🔌 用$ngRedux.connect()把任意 Angular 组件（controller、directive 等）与 store 状态双向绑定；
🧩 内置digestMiddleware，自动在每次 dispatch 后触发$digest，让视图保持同步。

库的核心入口仅注册了一个 provider，代码非常精简，可参见 index.js。

Redux middleware 在 AngularJS 里的痛点

传统 Redux 中间件是纯函数，拿不到任何 Angular 服务：

// 想访问 $http？只能自己手动 new 一个，无法享受 DI 的懒加载与测试 mock const myMiddleware = () => { const http = angular.injector().get('$http'); // 手动反查，又丑又脆弱 return next => action => next(action); };

手动调用angular.injector()不仅丑陋，还让单元测试和 mock 变得困难。ng-redux 给出的答案很优雅：中间件支持传字符串，由 Angular 注入器自动解析。

解锁可注入 middleware：字符串即依赖注入

第一步：用 factory 定义中间件工厂

ng-redux 要求可注入的中间件是一个factory——它的函数参数会被 Angular DI 注入，返回值才是真正的中间件函数：

function myInjectableMiddleware($http, anotherDependency) { // 这里可以合法使用 $http、$q、$timeout 等任何 Angular 服务 return store => next => action => { // 你的 middleware 逻辑 }; } angular.factory('myInjectableMiddleware', myInjectableMiddleware);

第二步：注册时传字符串，ng-redux 自动解析

创建 store 时，middlewares 数组里函数和字符串可以混用，字符串会走 Angular 注入器解析（详见 README.md 的 Dependency Injectable Middleware 章节）：

angular.module('app', [ngRedux]) .config(($ngReduxProvider) => { $ngReduxProvider.createStoreWith(reducer, [thunk, 'myInjectableMiddleware']); });

源码揭秘：一行 isString 判断

整个魔法发生在 ngRedux.js 的$get阶段：

const resolveMiddleware = middleware => isString(middleware) ? $injector.get(middleware) // 字符串 → 交给 Angular 注入器解析 : middleware; // 函数 → 原样保留

解析完成后，ng-redux 还会强制追加内置的 digestMiddleware 作为最后一个中间件（ngRedux.js），它负责在每次 dispatch 后调用$rootScope.$evalAsync()触发视图更新——这正是 AngularJS 与 Redux 能无缝协作的关键，实现见 digestMiddleware.js。

实战：手写一个带 HTTP 能力的 logging 中间件

把"记录每个 action 并上报"这类需求交给可注入中间件：

function reportMiddleware($http, $q) { return store => next => action => { if (action.type === 'DATA_SAVED') { $http.post('/audit', { action: action.type }); // 直接注入 $http！ } return next(action); }; } angular.factory('reportMiddleware', reportMiddleware);

再在createStoreWith中注册['reportMiddleware']即可。好处一览：

传统写法	ng-redux 可注入写法
手动`angular.injector().get()`	构造函数式注入`$http`
难以 mock，测试耦合全局	测试时直接 mock factory
中间件散落各处、初始化顺序混乱	统一在`createStoreWith`中声明

进阶：字符串注入不止 middleware

ng-redux 的 DI 能力覆盖面比你想象的更广：

Reducer 对象也可注入：把 reducer 以对象形式传入时，字符串值会在 config 阶段之后通过 DI 解析并自动combineReducers（ngRedux.js）；
Store enhancer 字符串：同样支持$injector.get()解析（ngRedux.js）；
provideStore 桥接外部 store：已有第三方 store 时，ng-redux 通过 providedStoreMiddleware.js 实现双向 action 透传，集成测试见 ngReduxProvidedStore.spec.js；
完整控制 store 创建：$ngReduxProvider.createStore(cb)回调里能拿到已解析的中间件数组，自由组合 enhancer 顺序，thunk 用法可参考 counter 示例。

大应用中还可通过$ngReduxProvider.config.debounce配置 digest 防抖，减少高频 dispatch 带来的性能压力，配置说明见 README.md 的 Config 章节。

上手清单：5 分钟接入可注入 middleware

npm install --save ng-redux安装依赖；
应用模块依赖中声明[ngRedux]；
用angular.factory定义返回中间件的工厂函数；
在.config中调用createStoreWith(reducer, [thunk, 'myMiddleware'])；
组件内用$ngRedux.connect(mapState, actions)(this)完成绑定，$scope.$on('$destroy', unsubscribe)别忘了。

总结

ng-redux 最被低估的设计，正是让 Redux middleware 融入 AngularJS 依赖注入体系：一个字符串、一行$injector.get()，就把纯函数中间件升级成了可注入服务。对于仍在维护 AngularJS + Redux 架构的团队，这是让中间件"有血有肉"（能访问$http、$q）的最优雅方式。更多细节可在 README.md 与 index.d.ts 类型定义中找到。