将redux-observable集成到现有项目中-未捕获的TypeError:无法读取未定义的属性“ apply”

时间:2018-07-25 19:28:34

标签: javascript redux rxjs reactivex redux-observable

我试图通过绕过现有的拦截器来执行简单操作,并将其传递给当前仅应映射到新操作类型的新史诗,从而将redux-observable集成到现有的redux项目中。我遇到了错误:

Uncaught TypeError: Cannot read property 'apply' of undefined
    at app.js:217853
    at Array.map (<anonymous>)
    at merger (app.js:217852)
    at MapSubscriber.project (app.js:217918)
    at MapSubscriber../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (app.js:225604)
    at MapSubscriber../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (app.js:220361)
    at Subject../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next (app.js:220127)
    at Function.epicMiddleware.run (app.js:217952)
    at GenericProvider../src/bootstrap/bootstrapStore.js.exports.default [as $get] (app.js:299968)
    at Object.getService (app.js:46915)

当我加载我的项目时,除了我要重新实现的操作外,该项目运行正常。

我怀疑我没有正确创建或导出史诗,因为尝试在bootstrapStore.js中调用epicMiddleware.run(registry.rootEpic)时似乎发生了错误:

const epicMiddleware = createEpicMiddleware();
[...]
export default function(registry) {
  const store = createStore([...]);
  epicMiddleware.run(registry.rootEpic);
  return store;
}

其中registry.rootEpic使用BottleJS引导的

bottle.factory('rootEpic', require('./bootstrapRootEpic').default);
bottle.factory('store', require('./bootstrapStore').default);

bootstrapRootEpic.js看起来像这样:

import { combineEpics } from 'redux-observable';

import { createExercisesEpic } from 'src/actions/epics';

export default function(registry) {
  return combineEpics(createExercisesEpic);
}

createExercisesEpics在src / actions / epics / index.js中定义:

export default {
  createExercisesEpic: require('./createExercisesEpic').default
};

和createExercisesEpic.js看起来像这样:

import { mapTo } from 'rxjs/operators';
import { ofType } from 'redux-observable';

import {
  CREATE_EXERCISES,
  CREATE_EXERCISES_COMPLETED
} from 'src/actions/types';

export default function(action$) {
  return action$.pipe(
    ofType(CREATE_EXERCISES),
    mapTo({type: CREATE_EXERCISES_COMPLETED})
  );
}

我在某个地方错过了一步吗,或者我的变量之一定义不正确或意外地未定义?

1 个答案:

答案 0 :(得分:0)

问题是我正在尝试使用此导入样式:

import { createExercisesEpic } from 'src/actions/epics';

仅适用于作为函数导出的函数,而不是作为导出对象的命名属性导出的函数。我将其更改为:

import epics from 'src/actions/epics';

export default function(registry) {
  return epics.createExercisesEpic;
}