Ionic2 rc0 和 redux/redux-thunk - 使用 AoT 创建 redux 存储答案

【问题标题】：Ionic2 rc0 and redux/redux-thunk - create redux store with AoTIonic2 rc0 和 redux/redux-thunk - 使用 AoT 创建 redux 存储
【发布时间】：2017-02-16 18:59:40
【问题描述】：

有人能够使用 redux 和 redux-thunk 构建应用程序吗？就我而言，它与ionic serve 一起工作，但与npm run build 一起失败。我不能为设备构建，它只能在浏览器中工作。

我收到了这些 ngc 错误

[19:25:46] ngc：错误：解析符号值时遇到错误静态的。调用函数'createStore'，函数调用不是支持的。考虑用引用替换函数或 lambda 到导出的函数，解析符号 AppModule c:/Ionic/ionic-redux-test/.tmp/app/app.module.ts，解析符号 c:/Ionic/ionic-redux-test/.tmp/app/app.module.ts 中的 AppModule 在 simpleInContext (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:469:23) 在 StaticReflector.simplify (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:472:22) 在 StaticReflector.annotations (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:61:36) 在 _loop_1 (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:53:54) 在 CodeGenerator.readFileMetadata (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:66:13) 在 c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:100:74 在 Array.map （本机）在 CodeGenerator.codegen (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:100:35) 在 codegen (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\main.js:7:81) 在 Object.main (c:\Ionic\ionic-redux-test\node_modules\@angular\tsc-wrapped\src\main.js:30:16)

[19:25:46] ngc: 编译失败

[19:25:46] ngc 失败：NGC 遇到错误 [19:25:46] 错误： NGC 遇到错误在子进程。 (c:\Ionic\ionic-redux-test\node_modules\@ionic\app-scripts\dist\ngc.js:62:24) 在 emitTwo (events.js:87:13) 在 ChildProcess.emit (events.js:172:7) 在 ChildProcess.cp.emit (c:\Ionic\ionic-redux-test\node_modules\cross-spawn\lib\enoent.js:40:29) 在可能关闭（内部/child_process.js:821:16）在 Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) 运行离子应用脚本时出错 "build": 错误：NGC 遇到错误

这些是我在 @NgModule 之前对 app.module.ts 所做的修改

//Redux - ReduxThunk - rootReducer
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk  from 'redux-thunk';
import { rootReducer } from '../modules/rootReducer';

const appStore = createStore(
    rootReducer,
    applyMiddleware(ReduxThunk)
);

并将其添加到 providers 数组中：

providers: [
    { provide: 'AppStore', useValue: appStore }
]

编辑：在 app.module.ts 中进行这些更改并将 const appStore 转换为 导出函数 之后。

export function appStore(): any {
  return createStore(
            rootReducer,
            applyMiddleware(ReduxThunk)
          );
};

我能够编译并运行该项目，但随后在 home.ts 中出现此错误

this.appStore.getState 不是函数类型错误：

this.appStore.getState 不是函数

这就是我在 home.ts 中的内容

export class HomePage {
    constructor(
        @Inject('AppStore') public appStore: any,
    ) { }

testRedux(){
    this.appStore.dispatch((dispatch)=> {
        dispatch({type: 'INCREMENT'});});
    console.log(this.appStore.getState().increment.counter);
    }
}

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： angular redux ionic2 redux-thunk rollupjs

【解决方案1】：

我能够通过 app.module.ts

中的以下更改来解决它

// const appStore = createStore(
//   rootReducer,
//   applyMiddleware(ReduxThunk)
// );

export function appStore(): any {
  return createStore(
            rootReducer,
            applyMiddleware(ReduxThunk)
          );
};

编辑：通过将提供程序数组中的 useValue 更改为 useFactory。它会解决第二个问题。

  providers: [
    { provide: 'AppStore', useFactory: appStore }
  ]

【讨论】：

相当肯定 const 是 es6 而 ngc 转译器是 es6，这就是为什么你要解决这个问题