CODEWITHSUNDEEP
angularreduxionic2redux-thunkrollupjs
Dee
Dee

Reputation: 979

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

Anyone has been able to build an app with redux and redux-thunk? In my case, it's working with ionic serve but failing with npm run build. I can't build for devices, it only works in browser.

I'm getting these ngc errors

[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

These are the modifications I've made on app.module.ts just before @NgModule

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

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

And adding this in the providers array:

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

Edit: After these changes in app.module.ts and turning const appStore into an export function. 

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

I'm able to compile and run the project but then getting this error in home.ts

this.appStore.getState is not a function TypeError:

this.appStore.getState is not a function

This is what I have in 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);
    }
}

Any ideas on how to tackle this?

Upvotes: 0

Views: 241

Answers (1)

Dee
Dee

Reputation: 979

I was able to solve it with the following change in app.module.ts

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

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

Edit: by changing useValue to useFactory in the provider array. It'll solve the second issue.

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

Upvotes: 2

Related Questions