如何将Redux Toolkit与RTK Query结合实现多场景购物车功能

你最初设想的「普通slice处理访客购物车+RTK Query处理登录态购物车」的方案可正常运行，但存在明显维护劣势：两套数据读写逻辑完全割裂，后续迭代购物车数量统计、商品选中态同步、登录后数据合并等需求时，需要分别适配两套逻辑，开发成本会高很多。

推荐用RTK Query统一处理两种场景的购物车逻辑，核心思路是通过自定义baseQuery自动适配不同登录状态的数据源：

• 登录态下走常规的后端请求baseQuery，读写服务端数据
• 访客态下走自定义的localStorageBaseQuery，直接读写本地存储的购物车数据

核心实现步骤 #

1. 首先编写适配localStorage的自定义baseQuery：

const localStorageBaseQuery = async ({ url, method, body }) => {
  const STORAGE_KEY = 'guest_cart'
  // 读取本地购物车初始数据
  const getCart = () => JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
  const saveCart = (data) => localStorage.setItem(STORAGE_KEY, JSON.stringify(data))

  switch (method) {
    case 'GET':
      return { data: getCart() }
    case 'POST':
      // 新增商品逻辑可自行扩展
      const newCart = [...getCart(), body]
      saveCart(newCart)
      return { data: newCart }
    case 'PUT':
      // 更新商品数量/选中态逻辑可自行扩展
      const updatedCart = getCart().map(item => item.id === body.id ? {...item, ...body} : item)
      saveCart(updatedCart)
      return { data: updatedCart }
    case 'DELETE':
      // 删除商品逻辑可自行扩展
      const filteredCart = getCart().filter(item => item.id !== body.id)
      saveCart(filteredCart)
      return { data: filteredCart }
    default:
      return { error: { status: 400, data: '不支持的请求方法' } }
  }
}

2. 编写动态切换baseQuery的逻辑：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

const dynamicBaseQuery = async (args, api, extraOptions) => {
  // 从store中读取登录状态，可根据自身项目逻辑调整判断条件
  const isLoggedIn = api.getState().user.isLoggedIn
  const baseQuery = isLoggedIn 
    ? fetchBaseQuery({ baseUrl: '/api/cart' }) 
    : localStorageBaseQuery
  return baseQuery(args, api, extraOptions)
}

3. 统一创建购物车的API slice：

export const cartApi = createApi({
  reducerPath: 'cartApi',
  baseQuery: dynamicBaseQuery,
  tagTypes: ['Cart'],
  endpoints: (builder) => ({
    getCart: builder.query({
      query: () => ({ url: '', method: 'GET' }),
      providesTags: ['Cart']
    }),
    addCartItem: builder.mutation({
      query: (item) => ({ url: '', method: 'POST', body: item }),
      invalidatesTags: ['Cart']
    }),
    updateCartItem: builder.mutation({
      query: (item) => ({ url: `/${item.id}`, method: 'PUT', body: item }),
      invalidatesTags: ['Cart']
    }),
    deleteCartItem: builder.mutation({
      query: (id) => ({ url: `/${id}`, method: 'DELETE', body: { id } }),
      invalidatesTags: ['Cart']
    }),
  }),
})

// 自动生成的hooks，两种场景下都可以直接调用，无需额外判断登录状态
export const { useGetCartQuery, useAddCartItemMutation, useUpdateCartItemMutation, useDeleteCartItemMutation } = cartApi

方案优势 #

• 全场景复用一套RTK Query的缓存、自动重取、状态同步能力，不用单独维护访客场景的slice和异步逻辑
• 业务组件完全不用感知当前是访客还是登录态，直接调用生成的hooks即可，逻辑高度统一
• 后续做登录后购物车合并需求时，只需要在登录成功的回调里调用对应mutation批量把本地购物车数据同步到服务端，再调用cartApi.util.invalidateTags(['Cart'])触发刷新即可，适配成本极低

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