Reactql环境下，如何创建基于GraphQL查询的Redux数据获取Action？

嘿，我完全懂你的困扰——REST模式下的Redux示例到处都是，但结合GraphQL（尤其是用Apollo来实现）的简单例子确实不多。别担心，我来给你一步步拆解，用实际代码示例帮你搞清楚怎么把Apollo的GraphQL查询和Redux Action结合起来。

核心思路 #

首先得明确：Apollo Client本身已经自带了一套状态管理机制（缓存、查询/突变处理），很多场景下其实不需要额外用Redux。但如果你的应用有复杂的全局状态需要和GraphQL数据联动，或者你就是想把GraphQL数据放到Redux Store里，那我们可以在Redux的异步Action中调用Apollo Client执行查询，再把结果dispatch到Store中。

下面是一个完整的极简示例，用Redux Toolkit（现在Redux官方推荐的写法）来实现：

1. 先配置好Apollo Client和Redux Store #

首先确保你的项目已经安装了必要依赖：@apollo/client, graphql, @reduxjs/toolkit, react-redux

创建Apollo Client实例

// src/apollo/client.js
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';

// 连接你的GraphQL服务端
const httpLink = createHttpLink({
  uri: 'http://localhost:4000/graphql', // 替换成你的GraphQL端点
});

export const client = new ApolloClient({
  link: httpLink,
  cache: new InMemoryCache(),
});

配置Redux Store

// src/redux/store.js
import { configureStore } from '@reduxjs/toolkit';
import dataReducer from './slices/dataSlice';

export const store = configureStore({
  reducer: {
    data: dataReducer, // 我们用来存GraphQL查询结果的slice
  },
});

2. 创建Redux Slice（含异步Action） #

用Redux Toolkit的createAsyncThunk来处理GraphQL查询的异步逻辑，它会自动帮我们生成pending/fulfilled/rejected三种状态的Action：

// src/redux/slices/dataSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import { client } from '../../apollo/client';
import { GET_POSTS } from '../../graphql/queries';

// 定义异步Action：获取帖子列表
export const fetchPosts = createAsyncThunk(
  'data/fetchPosts',
  async (_, { rejectWithValue }) => {
    try {
      // 用Apollo Client执行GraphQL查询
      const { data } = await client.query({
        query: GET_POSTS,
        // 如果需要传变量，在这里加：variables: { userId: 1 }
      });
      // 返回查询到的数据，会作为payload传给reducer
      return data.posts;
    } catch (error) {
      // 处理错误，返回错误信息
      // 可以根据Apollo的错误结构提取更详细的信息，比如error.graphQLErrors
      return rejectWithValue(error.message);
    }
  }
);

// 定义Slice的初始状态和reducer
const dataSlice = createSlice({
  name: 'data',
  initialState: {
    posts: [],
    loading: false,
    error: null,
  },
  reducers: {}, // 这里不需要同步reducer，全部用extraReducers处理异步状态
  extraReducers: (builder) => {
    builder
      // 查询开始时，设置加载状态
      .addCase(fetchPosts.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      // 查询成功，更新状态为结果数据
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.loading = false;
        state.posts = action.payload;
      })
      // 查询失败，记录错误信息
      .addCase(fetchPosts.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  },
});

export default dataSlice.reducer;

3. 定义GraphQL查询 #

把你的GraphQL查询单独抽出来，方便管理：

// src/graphql/queries.js
import { gql } from '@apollo/client';

export const GET_POSTS = gql`
  query GetPosts {
    posts {
      id
      title
      content
      author
    }
  }
`;

4. 在React组件中使用Redux Action #

最后，在组件里通过useDispatch触发异步Action，用useSelector获取Redux Store中的数据：

// src/components/PostsList.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchPosts } from '../redux/slices/dataSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  // 从Redux Store中获取数据、加载状态和错误信息
  const { posts, loading, error } = useSelector((state) => state.data);

  // 组件挂载时触发查询
  useEffect(() => {
    dispatch(fetchPosts());
  }, [dispatch]);

  // 处理加载和错误状态
  if (loading) return <div>正在加载帖子...</div>;
  if (error) return <div>出错了：{error}</div>;

  // 渲染帖子列表
  return (
    <div className="posts-list">
      <h2>帖子列表</h2>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
            <small>作者：{post.author}</small>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default PostsList;

一些实用提示 #

1. 要不要同时用Apollo和Redux？
   如果你的应用大部分状态来自GraphQL，其实直接用Apollo的useQuery、useMutation钩子会更简洁，不需要绕Redux。只有当你有非GraphQL的全局状态（比如用户偏好、UI状态）需要和GraphQL数据联动时，才需要结合Redux。

2. 错误处理优化
   Apollo的错误对象里包含graphQLErrors（服务端返回的GraphQL错误）和networkError（网络错误），你可以在createAsyncThunk里提取这些更详细的信息返回，比如：

   catch (error) {
     const errorMessage = error.graphQLErrors?.[0]?.message || error.networkError?.message || error.message;
     return rejectWithValue(errorMessage);
   }
   

3. Redux与Apollo缓存同步
   如果同时用了Apollo缓存和Redux Store，要注意两者的数据同步问题。比如当你用Apollo执行Mutation修改数据后，需要手动更新Redux Store，或者反过来。如果可以的话，尽量统一用一种状态管理方式会更省心。

内容的提问来源于stack exchange，提问作者Kamil Lewandowski