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

Question

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

我收到这些 ngc 错误

[19:25:46] ngc: Error: Error encountered resolving symbol values statically. Calling function 'createStore', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in c:/Ionic/ionic-redux-test/.tmp/app/app.module.ts, resolving symbol AppModule in c:/Ionic/ionic-redux-test/.tmp/app/app.module.ts at simplifyInContext (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:469:23) at StaticReflector.simplify (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:472:22) at StaticReflector.annotations (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\static_reflector.js:61:36) at _loop_1 (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:53:54) at CodeGenerator.readFileMetadata (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:66:13) at c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:100:74 at Array.map (native) at CodeGenerator.codegen (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\codegen.js:100:35) at codegen (c:\Ionic\ionic-redux-test\node_modules\@angular\compiler-cli\src\main.js:7:81) at Object.main (c:\Ionic\ionic-redux-test\node_modules\@angular\tsc-wrapped\src\main.js:30:16)

[19:25:46] ngc: Compilation failed

[19:25:46] ngc failed: NGC encountered an error [19:25:46] Error: NGC encountered an error at ChildProcess. (c:\Ionic\ionic-redux-test\node_modules\@ionic\app-scripts\dist\ngc.js:62:24) at emitTwo (events.js:87:13) at ChildProcess.emit (events.js:172:7) at ChildProcess.cp.emit (c:\Ionic\ionic-redux-test\node_modules\cross-spawn\lib\enoent.js:40:29) at maybeClose (internal/child_process.js:821:16) at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5) Error running ionic app script "build": Error: NGC encountered an error

这些是我在@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: [
    { provide: 'AppStore', useValue: appStore }
]

编辑：在 app.module.ts 中进行这些更改并将 const appStore 变成 导出函数。

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

我能够编译并运行项目，但随后在 home.ts

中出现此错误

this.appStore.getState is not a function TypeError:

this.appStore.getState is not a function

这是我在 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);
    }
}

关于如何解决这个问题有什么想法吗？

Answer 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 }
  ]

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

Ionic2 rc0 and redux/redux-thunk - create redux store with AoT

angular

redux

ionic2

redux-thunk

rollupjs