ApolloClient集成Redux报错：client.reducer is not a function 如何解决？

这个问题我之前也碰到过，本质是Apollo Client 3.x及更高版本移除了client.reducer()方法导致的——在旧版的apollo-redux集成方案中，我们需要将Apollo的reducer注入Redux store来管理查询状态，但新版Apollo Client已经内置了独立的缓存状态管理系统，不再依赖Redux维护自身状态。下面给你两种解决方案：

方案1：推荐使用Apollo Client默认的状态管理（无需和Redux耦合） #

这是官方现在主推的方式，Apollo Client会自己处理查询、缓存和状态更新，和Redux可以独立共存，互不影响。

步骤如下：

• 不需要在Redux的combineReducers中加入apollo: client.reducer()
• 用ApolloProvider包裹你的应用，同时如果需要Redux，嵌套Provider即可

代码示例：

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
import { Provider } from 'react-redux';
import store from './your-redux-store';

// 初始化Apollo Client
const client = new ApolloClient({
  uri: 'https://your-graphql-server-url', // 替换成你的GraphQL服务地址
  cache: new InMemoryCache(),
});

// 应用入口渲染
ReactDOM.render(
  <Provider store={store}>
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  </Provider>,
  document.getElementById('root')
);

这样你的Redux可以继续管理应用的其他状态，Apollo Client自己处理GraphQL相关的状态，两者各司其职，代码更简洁。

方案2：强制将Apollo状态同步到Redux（不推荐，仅适用于特殊场景） #

如果你因为业务需求必须把Apollo的状态同步到Redux，可以通过订阅Apollo Cache的变化，手动将缓存更新同步到Redux store：

1. 先定义一个处理Apollo状态的自定义reducer
2. 初始化Redux store时将这个reducer加入combineReducers
3. 订阅Apollo Cache的变更，通过dispatch同步到Redux

代码示例：

import { ApolloClient, InMemoryCache } from '@apollo/client';
import { createStore, combineReducers } from 'redux';

// 自定义Apollo状态处理reducer
const apolloReducer = (state = {}, action) => {
  switch(action.type) {
    case 'APOLLO_CACHE_UPDATED':
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

// 组合所有reducers
const rootReducer = combineReducers({
  apollo: apolloReducer,
  // 你的其他reducers
});

const store = createStore(rootReducer);

// 初始化Apollo Client
const client = new ApolloClient({
  uri: 'https://your-graphql-server-url',
  cache: new InMemoryCache(),
});

// 订阅Apollo Cache变化，同步到Redux
client.cache.subscribe({
  callback: (cacheDiff) => {
    store.dispatch({
      type: 'APOLLO_CACHE_UPDATED',
      payload: cacheDiff,
    });
  },
});

⚠️ 注意：这种方式会增加状态管理的复杂度，而且Apollo Client的缓存已经做了很多优化，强行同步到Redux属于重复维护状态，除非有特殊业务需求，否则不建议这么做。

内容的提问来源于stack exchange，提问作者Mohamed Taboubi