Apollo-client: Struggling to get Redux working with Apollo Client on React Native. Guidance appreciated.

Created on 25 Sep 2016  路  2Comments  路  Source: apollographql/apollo-client

Firstly, does Apollo Client integrate the Redux devtools into React Native too, or just React? After reading http://dev.apollodata.com/core/devtools.html, I expected it to just magically work, but couldn't get anything to show up.

I then read http://dev.apollodata.com/react/redux.html and was still unable to get it to work.

./reducers.js

export default (state = 0, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    default:
      return state;
  }
};

main.js

import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import { createStore, combineReducers, applyMiddleware } from 'redux';
import devTools from 'remote-redux-devtools';
import reducer from './reducers';

const client = new ApolloClient({
  networkInterface: createNetworkInterface('http://localhost:8080/graphql')
});

const store = createStore(
  combineReducers({
    reducer: reducer,
    apollo: client.reducer()
  }),
  applyMiddleware(client.middleware()),
  devTools()
);

then in my component:

<ApolloProvider client={client} store={store}>

When I try to do this I get the error: "The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "reducer", "apollo"

At this point, just trying to see SOMETHING with the React Native Redux Dev Tools. Thanks!

Most helpful comment

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import reducer from './reducers';

const enhancers = [
  applyMiddleware(client.middleware()),
  devTools()
];

const rootReducer = combineReducers({
  reducer: reducer,
  apollo: client.reducer()
});

const store = createStore(rootReducer, {}, compose(...enhancers));

All 2 comments

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import devTools from 'remote-redux-devtools';
import reducer from './reducers';

const enhancers = [
  applyMiddleware(client.middleware()),
  devTools()
];

const rootReducer = combineReducers({
  reducer: reducer,
  apollo: client.reducer()
});

const store = createStore(rootReducer, {}, compose(...enhancers));

It works beautifully. Thank you so much!

Was this page helpful?
0 / 5 - 0 ratings