RTK查询中如何将数据保存到localStorage中？

Question

我想创建一个购物车，其中包含用户添加的产品列表并将其保存在 localStorage 中。如果我们有 RTK 查询的代码，是否可以在 createApi() 中定义该购物车？如果没有，我怎样才能在另一个切片中使用它？

export const productApi = createApi({
  reducerPath: "productApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://127.0.0.1:8000/api/" }),
  tagTypes: ["Products"],
  endpoints: (builder) => ({
    SingleProduct: builder.query<IProduct, number>({
      query: (id) => `product/${id}/`,
      providesTags: (result, error, id) => [{ type: "Products", id }],
    }),
  }),
});

如果无法直接将购物车操作添加到 createApi，我如何提取 SingleProduct 并在此切片中使用它？

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<{ id: number, qty: number }>) => {
      const data = // what should i put here?
      state.push(data);

      localStorage.setItem("cartItems", JSON.stringify(state));
    },
  },
});

Answer 1

我不认为正确的位置是在切片减速器本身内部。减速器必须是干净的 - 只改变状态。并且没有副作用代码和外部性，例如本地存储。我在 RTK 查询中遇到了和你一样的问题，因为在“vanila redux”中我曾经在 createAsyncThunk 中执行所有这些操作。