Integration with ng2-redux

[nareshbhatia]

I am looking for some guidance on integration with ng2-redux (already looged an issue there too). ng2-redux requires initialization via bootstrap():

import {bootstrap} from 'angular2/platform/browser';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {App} from './containers/App';
import {provider} from  'ng2-redux';
import {rootReducer} from './reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer);

bootstrap(
  App,
  [provider(store)]
  );

angular2-seed generates the bootstrap() call in main.js. Is there a way to hook into this call? Is there any other alternative? Usually I would do this kind of initialization in AppComponent, but given the code above, I am not sure how.

[joshwiens]

That's a curious problem. I'm done with work in an hour, I'll tinker with it.

/cc @NathanWalker @ludohenin

[mgechev]

import {provide, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import {App} from './containers/App';
import * as redux from  'ng2-redux';
import {rootReducer} from './reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer);

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(App, [
  ROUTER_PROVIDERS,
  redux.provide(store),
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

@nareshbhatia does this work?

I'm using angular2-seed + ngrx in my project and the initialization process is similar.

[nareshbhatia]

@mgechev, thanks for the help. I am almost there. After correcting several errors, this is the last error I am stuck on:

src/client/main.ts(7,25): error TS2307: Cannot find module 'ng2-redux'.

I can't figure this one out. I have installed the ng2-redux package and it exists in my node_modules. So I can't understand why the compiler doesn't find it.

Here's my latest code:

import {provide, enableProdMode} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';
import {AppComponent} from './app/components/app.component';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import * as redux from  'ng2-redux';
import {rootReducer} from './reducers';

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(rootReducer);

bootstrap(AppComponent, [
  ROUTER_PROVIDERS,
  redux.provider(store),
  provide(APP_BASE_HREF, { useValue: '<%= APP_BASE %>' })
]);

P.S. In your code you have redux.provide(store), - are you sure that's correct? ng2-redux has a function called provider() (with a "r"), nothing called provide().

[nareshbhatia]

@mgechev, I created a new project for this - https://github.com/archfirst/angular2-seed-redux. Could you please try to reproduce the error above and help me get this combination working?

Thanks for all your help.

[mgechev]

@nareshbhatia I did a typo, it should be provider.

I can't find any type definitions of ng2-redux, neither its npm package, nor with typings.

As temporal workaround you can define something like:

declare module 'ng2-redux' {
  export var provider: any;
  // declare other typings if any
}

Another missing part is lodash:

npm i lodash

I find another problem as well - the ng2-redux library cannot be loaded using SystemJS.

After transpilation, your SystemJS config should look like:

System.config({
  "defaultJSExtensions": true,
  "packageConfigPaths": [
    "/node_modules/*/package.json"
  ],
  "paths": {
    "main": "/main",
    "angular2/*": "/angular2/*",
    "rxjs/*": "/rxjs/*",
    "app/*": "/app/*",
    "redux": "/node_modules/redux/dist/redux",
    "invariant": "/node_modules/invariant/browser",
    "*": "/node_modules/*"
  },
  "packages": {
    "ng2-redux": {
      "format": "cjs"
    },
    "angular2": {
      "defaultExtension": false
    },
    "rxjs": {
      "defaultExtension": false
    }
  }
});