The redux way with ng2-redux

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 {

}

[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.

[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.