AngularJS状态管理不再难！ng-redux 是一款专为 AngularJS（Angular 1.x）打造的Redux 绑定库，它通过一个$ngRedux服务把 Redux 的 store 与你的控制器无缝连接起来，让状态更新自动触发 Angular 的 digest cycle，轻松告别$scope层层传递状态的老难题。

ng-redux 是什么？解决什么问题？

在大型 AngularJS 应用中，状态散落在各个 service、$scope和全局变量里，调试困难、难以复用。Redux 提出了"单一数据源 + 纯函数 reducer + 单向数据流"的解决方案，但它最初是为 React 设计的。

ng-redux就是补齐这一环的官方风格绑定库：

• 自动调用$rootScope.$evalAsync触发 digest，状态一变，视图自动刷新；
• 支持 Angular 依赖注入来注册中间件；
• 提供connectAPI 把状态切片合并进 controller。

📌 注意：如果你使用的是 Angular 2+ / Angular（现代版），应选择同团队维护的angular-redux/store；ng-redux 专门服务于 AngularJS 项目。

一键安装 ng-redux 最快配置方法

使用 npm 一条命令即可安装：

npm install --save ng-redux

然后在模块声明中引入ngRedux，并在 config 阶段初始化 store。完整 API 说明可参考 README.md 中的 Quick Start 章节。

三种方式初始化 Redux Store

ng-redux 的 Provider 在 src/components/ngRedux.js 中定义，共提供三种初始化方式，按需求灵活选用：

方式一：createStoreWith（最常用）

传入组合后的 reducer、中间件数组和可选的 store enhancers，ng-redux 帮你自动创建 store：

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

它支持两种 reducer 形式：一个用combineReducers组合好的函数，或者一个对象——对象的值可以写字符串，ng-redux 会通过 Angular DI 解析后再组合。

方式二：provideStore（复用已有 Store）

如果项目里已经创建好了 store（比如与 SSR 或测试环境共享），直接注入即可：

$ngReduxProvider.provideStore(existingStore);

内部通过 src/components/storeWrapper.js 将外部 store 的每次更新透传进 ng-redux 的 store，从而正确触发 digest。

方式三：createStore（完全掌控）

当你需要自定义 enhancer 顺序时，可传入一个工厂函数，由你自己组装createStore：

$ngReduxProvider.createStore((middlewares, enhancers) => createStore(reducer, {}, compose(applyMiddleware(thunk, ...middlewares), ...enhancers)) );

💡 注意：ng-redux 内置的中间件必须放在中间件链的最后，它负责触发 digest。

connect：把 Redux 状态绑定到 Controller

核心 API 是$ngRedux.connect(mapStateToTarget, mapDispatchToTarget)(target)，其实现位于 src/components/connector.js。以官方 counter 示例为例（examples/counter/components/counter.js）：

constructor($ngRedux, $scope) { const unsubscribe = $ngRedux.connect(this.mapStateToThis, CounterActions)(this); $scope.$on('$destroy', unsubscribe); } // 声明 controller 想要哪部分状态 mapStateToThis(state) { return { value: state.counter }; }

效果非常直观：

• state.counter会自动合并为this.value；
• CounterActions里的 action creator 会以同名方法合并到 controller，模板里直接counter.increment()即可派发 action；
• connect返回的unsubscribe务必在$destroy时调用，避免内存泄漏。

底层细节：connector 使用 src/utils/shallowEqual.js 做浅比较，只有切片真正变化时才更新目标对象，减少无谓的 digest 开销。

依赖注入中间件：ng-redux 的独门绝技

传统 Redux 中间件只是纯函数，而 ng-redux 允许你用字符串注册 Angular service 作为中间件，它会被$injector解析，从而获得完整的 DI 能力：

// 定义一个可注入依赖的中间件 factory angular.factory('myMiddleware', ($http) => { return store => next => action => next(action); }); // 注册时直接传字符串 $ngReduxProvider.createStoreWith(reducer, [thunk, 'myMiddleware']);

这让"记录日志要注入$log、请求日志要注入$http"这类场景变得极其简单，是 ng-redux 相对 react-redux 最鲜明的特色。

性能优化：Debounce Digest 配置

高频状态变化（如实时数据推送）会触发大量 digest。ng-redux 允许通过 lodash.debounce 对 digest 防抖（实现在 src/components/digestMiddleware.js）：

angular.module('app').config(($ngReduxProvider) => { $ngReduxProvider.config.debounce = { wait: 100, maxWait: 500 }; });

含义：100ms 内的多次 store 变更合并为一次 digest，最多延迟 500ms，大数据量应用中收益明显。

官方示例：从 counter 到 async 实战

仓库自带两个可运行的 webpack 示例，是最好的学习材料：

counter 示例的入口文件 examples/counter/index.js 展示了最标准的四步走：声明模块 → config 里 createStoreWith → 注册指令 → 运行 DevTools，模板中直接用{{counter.value}}响应式展示状态（examples/counter/components/counter.html）。

ng-redux 与 Angular 生态选型建议

• 仍在维护 AngularJS 1.x 项目→ ng-redux 是首选，生态成熟，$ngRedux同时暴露dispatch/subscribe/getState，高级场景可直接操作 store；
• 新项目或升级到 Angular 2+→ 请使用同团队的angular-redux/store；
• 需要路由同步→ 可搭配 redux-ui-router（UI-Router）或 ng-redux-router（angular-route）。

快速上手清单 ✅

1. npm install --save ng-redux；
2. 模块中声明依赖[ngRedux]；
3. config 阶段用$ngReduxProvider.createStoreWith(rootReducer, middlewares)初始化；
4. controller 中$ngRedux.connect(mapState, Actions)(this)并记住 unsubscribe；
5. 高频场景加config.debounce防抖配置。

掌握以上五步，AngularJS 状态管理就真正不再难了——单向数据流、可预测的 reducer、自动响应的视图，一套 ng-redux 全部搞定。