如何在AngularJS 1.x项目中引入Redux？解决combineReducers未定义错误

这个错误的核心原因是ngRedux本身不包含Redux核心库——它只是AngularJS对Redux的封装层，必须依赖原生Redux库才能正常工作。你只引入了AngularJS和ngRedux，缺少Redux核心脚本，导致ngRedux找不到combineReducers这个Redux原生方法。

解决步骤 #

1. 调整脚本引入顺序
   必须先引入Redux核心库，再引入ngRedux，确保Redux的API能被ngRedux访问到。示例HTML引入代码：

   <!-- AngularJS 1.8.3 -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
   <!-- Redux核心库（推荐4.x版本，和ngRedux兼容） -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.2.1/redux.min.js"></script>
   <!-- ngRedux -->
   <script src="path/to/ng-redux.min.js"></script>
   

2. 验证reducer配置逻辑
   确保你的reducer配置符合Redux规范：

   • 单个reducer可直接传入createStoreWith
   • 多个reducer需要用Redux.combineReducers合并后再传入
     示例代码：

   // 定义单个reducer
   function counterReducer(state = 0, action) {
     switch(action.type) {
       case 'INCREMENT':
         return state + 1;
       case 'DECREMENT':
         return state - 1;
       default:
         return state;
     }
   }
   
   // 配置ngRedux
   angular.module('myApp', ['ngRedux'])
     .config(function($ngReduxProvider) {
       // 单个reducer直接传入
       $ngReduxProvider.createStoreWith(counterReducer);
       
       // 多个reducer的写法
       // const rootReducer = Redux.combineReducers({
       //   counter: counterReducer,
       //   // 其他reducer...
       // });
       // $ngReduxProvider.createStoreWith(rootReducer);
     });
   

3. 额外检查项

   • 确认Redux版本与ngRedux兼容（ngRedux 4.x适配Redux 4.x）
   • 在浏览器控制台输入Redux和angular.module('ngRedux')，验证两个库是否成功加载

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