Angular / Redux / Reducers 未导入答案

【问题标题】：Angular / Redux / Reducers not importingAngular / Redux / Reducers 未导入
【发布时间】：2017-10-01 02:10:33
【问题描述】：

我的组合减速器的角度似乎可能存在注入问题。 Angular 是创建 Redux 存储然后将此实例传递给 React。为此，我正在使用 ngReact 和 ngRedux 库。

请原谅任何错别字。应用程序通过 Webpack 正确编译并运行，但此处详细说明了此问题。

下面是我的简单Reducer

const botsReducerTemp = (state = [] , action) => {  
    switch(action.type) {
      case 'ADD_BOT_API':

        return state

      default:
        return state;
  }
}
export default botsReducerTemp;

我在一个名为 reducers 的文件夹中有一个 index.js，它结合了这个 reducer（以及其他几个，但在这个问题中没有显示）

   import {combineReducers} from 'redux';
    import botsReducerTemp from './bots/bot-reducersTemp';

    const rootReducer =  combineReducers ({
        botsReducerTemp
    });

    export default rootReducer;

在我的 Angular 1.5 应用程序中，我有一个 module.js（导入的路径正确并通过 WebPack 编译）

注意：import rootReducer from '../../reducers'的导入这是index.js

的组合reducer的导入

import ngreact from 'ngreact';
import ngRedux from 'ng-redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger'
import rootReducer from '../../reducers'

angular
  .module('meso-app', [
    'meso-core',
    'ngFileUpload',
    'chart.js',
    'ngRedux'
  ])

 .config(($ngReduxProvider) => {
      $ngReduxProvider.createStoreWith(rootReducer, [thunk], [logger], [{ tests: {id: 1, isDone: false, text: 'bot 1'}}] );
      console.log('rootReducer = ' + typeof(rootReducer));
      console.dir(rootReducer);
  })

......lot's other angular boot stuff....

问题出在我的 .config rootReducer 在 Chrome 调试中查看时显示为 不可用。

$ngReduxProvider.createStoreWith 执行正常，但由于 rootReducer 为空，因此未构建 Redux 存储。

rootReducer 是在 .createStoreWith 中执行/解析的函数

那么我该如何注入/导入这个函数呢？

【问题讨论】：

标签： angularjs redux

【解决方案1】：

在 module.js 中，我删除了导入并将其替换为 require

var rootReducer = require('../../reducers');

然后在我的 .config 中我使用了

 let rootReducers = rootReducer.rootReducer;

然后调用 createStoreWith 如下

  $ngReduxProvider.createStoreWith(rootReducers, [thunk], null, [{ tests: {id: 1, isDone: false, text: 'bot 1'}}] );

【讨论】：

【解决方案2】：

我正在遵循类似的模式，并且我能够通过以下方式使其工作：

import { combineReducers } from 'redux';
import { ExampleReducer } from './example';

export const RootReducer = combineReducers({
    example: ExampleReducer
});

然后在您的 .config 中：

...
import { RootReducer } from '../../reducers';
...
.config(($ngReduxProvider) => {
  $ngReduxProvider.createStoreWith(RootReducer, [thunk], [logger], [{ tests: {id: 1, isDone: false, text: 'bot 1'}}] );
  console.log('rootReducer = ' + typeof(RootReducer));
  console.dir(RootReducer);
})

【讨论】：