如何将GraphQL获取的数据存入Redux Toolkit状态？

1. 完善Redux Toolkit的Slice，添加状态更新逻辑 #

首先在你的cart切片中，新增用于更新商品列表和加载状态的reducer，Redux Toolkit会自动生成对应的action创建函数：

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  cartItems: [],
  amount: 0,
  total: 0,
  isLoading: true,
};

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    setCartItems: (state, action) => {
      state.cartItems = action.payload;
      // 同步计算商品数量和总价（根据你的业务需求调整）
      state.amount = action.payload.length;
      state.total = action.payload.reduce((sum, item) => sum + (item.price || 0), 0);
    },
    setIsLoading: (state, action) => {
      state.isLoading = action.payload;
    },
  },
});

// 导出action创建函数供组件调用
export const { setCartItems, setIsLoading } = cartSlice.actions;
export default cartSlice.reducer;

2. 在组件中分发Action，将useQuery数据存入Redux #

在Product组件中，使用useDispatch钩子获取dispatch方法，当useQuery成功拿到数据后，触发对应的action更新Redux状态：

import { useQuery } from "@tanstack/react-query";
import { useDispatch } from "react-redux";
// 替换为你的cartSlice实际路径
import { setCartItems, setIsLoading } from "../store/slices/cartSlice";

export default function Product() {
  const dispatch = useDispatch();
  const { loading, error, data } = useQuery(GET_PRODUCTS);

  // 数据加载完成且无错误时，更新Redux状态
  if (!loading && !error && data) {
    dispatch(setCartItems(data));
    dispatch(setIsLoading(false));
  }

  // 同步加载状态到Redux
  if (loading) {
    dispatch(setIsLoading(true));
  }

  return (
    <>
      {loading && <div>加载中...</div>}
      {error && <div>加载失败，请重试</div>}
      {data && <div>商品数据已存入Redux</div>}
    </>
  );
}

注意事项 #

• 确保你的React应用已经配置了Redux Provider，所有需要访问Redux状态的组件都被包裹在Provider内。
• 如果amount和total需要更灵活的计算，可以使用Redux Toolkit的createSelector创建派生状态，避免在reducer中硬编码计算逻辑。
• 若后续不需要在组件中保留useQuery的缓存数据，也可以直接使用RTK Query（Redux Toolkit内置的请求库）来发起请求并自动存入Redux，减少代码冗余。

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