Apollo-angular: The redux way with ng2-redux

[hlehmann]

Could we implement a very similar version of the redux integration:
In the bootstrap

    let store = createStore(
        combineReducers(reducers),
        compose(
            applyMiddleware(apolloClient.middleware()),
            window.devToolsExtension ? window.devToolsExtension() : f => f
        )
    );

    let providers = [
        NgRedux,
        APOLLO_PROVIDERS,
        defaultApolloClient(apolloClient),
    ];

    enableProdMode();
    let ngComponentRef:ComponentRef = await bootstrap(App);
    let _ngRedux:NgRedux = ngComponentRef.injector.get(NgRedux);
    _ngRedux.provideStore(store);

In the component

@connect({
    mapStateToProps(state) {
         return {...};
    },
    mapQueryToProps() {
       return {...}
    }
})
@Component({...})
export class MyComponent {

}

[stubailo]

What do we need to do to implement this? Perhaps we can take some of the code from react-apollo?

[hlehmann]

For the bootstrap there is nothing to do.
For the component I'm not sure that we can write it that way, @Urigo any thought ?

First step should be something like that

@Component({...})
export class MyComponent {
    constructor(private angularApollo : Angular2Apollo) {
         angularApollo.connect({
              mapQueryToProps() {
                    return {...}
              }
         })(this)
    }
}

The code should be the same of react-apollo exept the link with angular life cycle.

[stubailo]

How do people use Redux with Angular usually?

[hlehmann]

it's well documented here:
http://ngcourse.rangle.io/handout/redux/

[Urigo]

@hlehmann I would love to see an example of how to use the connect pattern with ng-rx.
Or also using ngRedux with connect to an Angular 2 Component.
I've looked a lot about it and haven't found the equivalent.

Right now, I believe that the current best practice is to create a dumb Component and a parent Component that will render it.
Like this is the dumb component and is wrapped by this component-with-data component.

I feel like using the connect pattern will be cleaner here but not sure if it's popular with Angular 2.0 and ng-rx developers.
I saw this with ngRedux but I'm not sure it's simpler or more clean then the example above.

mmm Also the select pattern looks interesting

Would love to hear opinions from the community to figure out the best practice solution for that

[gsans]

I would say that these are the options I've seen being used in the Angular Community:
1) original Redux; there's a RxJS 5 middleware (redux-observable)
2) 3rd party bindings: ng2-redux
3) Observables: ngrx/store and co

Adoption is still slow so no clear winner.

[nakedcity]

Blocking issue? https://github.com/apollostack/apollo-client/issues/593#issuecomment-255331038

[alexthewilde]

For anyone still interested in integrating the Apollo client store with an existing Redux store, here's a working example app I published.

If you inspect the store with Redux DevTools, you'll see the apollo state alongside the ng2-redux store state.

[Urigo]

now also documented thanks to @alexthewilde PR - http://dev.apollodata.com/angular2/redux.html