Integrating redux-observable into existing project - Uncaught TypeError: Cannot read property 'apply' of undefined
Integrating redux-observable into existing project - Uncaught TypeError: Cannot read property 'apply' of undefined
我正在尝试将 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})
);
}
我是否遗漏了某处步骤,或者我的变量之一可能未正确定义或意外未定义?
问题是我试图使用这种导入样式:
import { createExercisesEpic } from 'src/actions/epics';
它仅适用于导出为函数的函数,而不适用于导出对象的命名属性。我将其更改为:
import epics from 'src/actions/epics';
export default function(registry) {
return epics.createExercisesEpic;
}
我正在尝试将 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})
);
}
我是否遗漏了某处步骤,或者我的变量之一可能未正确定义或意外未定义?
问题是我试图使用这种导入样式:
import { createExercisesEpic } from 'src/actions/epics';
它仅适用于导出为函数的函数,而不适用于导出对象的命名属性。我将其更改为:
import epics from 'src/actions/epics';
export default function(registry) {
return epics.createExercisesEpic;
}