Interegrate with react-loop reducer cause error

[wuzhuzhu]

I'm trying to use apollo on pepperoni(React Native) which use 'react-loop' reducer combiner.
https://github.com/futurice/pepperoni-app-kit
https://github.com/raisemarketplace/redux-loop
and got error "Existing store does not use apolloReducer for apollo".

reducer.js:

import {Map} from 'immutable';
import {combineReducers} from 'redux-loop';
import NavigationStateReducer from '../modules/navigation/NavigationState';
import AuthStateReducer from '../modules/auth/AuthState';
import CounterStateReducer from '../modules/counter/CounterState';
import SessionStateReducer, {RESET_STATE} from '../modules/session/SessionState';
import {apolloReducer} from './apollo'

const reducers = {
  // Apollo Reducer
  apollo: apolloReducer,

  // Authentication/login state
  auth: AuthStateReducer,

  // Counter sample app state. This can be removed in a live application
  counter: CounterStateReducer,

  // @NOTE: By convention, the navigation state must live in a subtree called
  //`navigationState`
  navigationState: NavigationStateReducer,

  session: SessionStateReducer

};

// initial state, accessor and mutator for supporting root-level
// immutable data with redux-loop reducer combinator
const immutableStateContainer = Map();
const getImmutable = (child, key) => child ? child.get(key) : void 0;
const setImmutable = (child, key, value) => child.set(key, value);

const namespacedReducer = combineReducers(
  reducers,
  immutableStateContainer,
  getImmutable,
  setImmutable
);

export default function mainReducer(state, action) {
  if (action.type === RESET_STATE) {
    return namespacedReducer(action.payload, action);
  }

  return namespacedReducer(state || void 0, action);
}

Maybe combinReducer from redux-loop break the apolloReducer?
Is there any possible to make apollo work with react-loop together?

[stubailo]

Yes, combineReducers means that your state is no longer on the apollo key in the root, now it's at reducers.apollo.

Currently it's not supported to have apollo state be at a not-root key of the store. Have you considered using it on the top level instead? I doubt Apollo Client will work with redux-loop anyway, but I haven't tried it.

[jbaxleyiii]

@wuzhuzhu here is an example of it working with redux-loop: #137

The issue with the above actually has to do with immutablejs support for the core client. I've added that in the same PR

This will work in 0.4.3

[wuzhuzhu]

@jbaxleyiii I added immutable = {true} option on provider and got "Existing store does not use apolloReducer for apollo" error.

"react-apollo": "^0.4.5",
"redux-loop": "^2.1.0",

reducer.js:

import {Map} from 'immutable';
import {combineReducers} from 'redux-loop';
import NavigationStateReducer from '../modules/navigation/NavigationState';
import AuthStateReducer from '../modules/auth/AuthState';
import CounterStateReducer from '../modules/counter/CounterState';
import SessionStateReducer, {RESET_STATE} from '../modules/session/SessionState';
import {apolloReducer} from './apollo';

const reducers = {
  // Apollo Reducer
  apollo: apolloReducer,

  // Authentication/login state
  auth: AuthStateReducer,

  // Counter sample app state. This can be removed in a live application
  counter: CounterStateReducer,

  // @NOTE: By convention, the navigation state must live in a subtree called
  //`navigationState`
  navigationState: NavigationStateReducer,

  session: SessionStateReducer

};

// initial state, accessor and mutator for supporting root-level
// immutable data with redux-loop reducer combinator
const immutableStateContainer = Map();
const getImmutable = (child, key) => child ? child.get(key) : void 0;
const setImmutable = (child, key, value) => child.set(key, value);

const namespacedReducer = combineReducers(
  reducers,
  immutableStateContainer,
  getImmutable,
  setImmutable
);

export default function mainReducer(state, action) {
  if (action.type === RESET_STATE) {
    return namespacedReducer(action.payload, action);
  }

  return namespacedReducer(state || void 0, action);
}

main.js:

import 'es6-symbol/implement';
// import {Provider} from 'react-redux';  //Use ApolloProvider instead.
import {ApolloProvider} from 'react-apollo';
import store from '../redux/store';
import {apolloClient} from '../redux/apollo';
import AppViewContainer from './AppViewContainer';
import React from 'react';
import {Platform, BackAndroid} from 'react-native';
import * as NavigationStateActions from './navigation/NavigationState';
import gql from 'graphql-tag';
import get from 'lodash';

...
render() {
      return (
        <ApolloProvider store={store} client={apolloClient} immutable={true}>
          <AppViewContainer />
        </ApolloProvider>
      );
    }
...