能否在Redux Toolkit切片文件外发起API请求？

是的，你完全可以在React Native组件内直接发起API请求，无需依赖Redux Toolkit的createAsyncThunk或切片文件。这种写法能有效避免切片文件因堆积大量异步请求代码而变得臃肿，下面是具体实现方案和注意事项：

一、直接在组件内编写API请求的示例 #

1. 调整切片，只保留状态更新的普通Reducer #

首先修改userSlice，移除createAsyncThunk相关代码，新增一个用于更新购物车状态的普通Reducer：

const initialState={
  token: null,
  loading: false,
  error: false,
  success: false,
  userDetails: {},
  userCart: {},
  userAddress:{}
}

const userSlice = createSlice({
  name: 'user',
  initialState,
  reducers:{
    // 新增更新购物车的普通action
    setUserCart: (state, action) => {
      state.userCart = action.payload;
    },
    // 其他原有reducer逻辑...
  },
  // 无需再用extraReducers处理异步请求
})

export const { setUserCart } = userSlice.actions;
export default userSlice.reducer;

2. 在组件内直接发起API请求并更新状态 #

将购物车更新的API逻辑移到组件中，用useState管理组件局部的加载/错误状态，请求成功后dispatch普通action更新Redux状态：

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import axios from 'axios';
import { setUserCart } from '../slices/userSlice';
import { BASE_URL } from '../config';

const CartComponent = () => {
  const dispatch = useDispatch();
  // 组件局部管理请求状态
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleCartUpdate = async (data) => {
    const { cartId, userId, foodId, token } = data;
    setLoading(true);
    setError(null);
    
    try {
      // 直接在组件内发起API请求
      const res = await axios.patch(`${BASE_URL}/cart/${cartId}`, {
        userId,
        foodId
      }, {
        withCredentials: true,
        headers: { authorization: `Bearer ${token}` }
      });
      // 请求成功后更新Redux状态
      dispatch(setUserCart(res.data));
    } catch (err) {
      setError(err.message || '更新购物车失败');
      // 如需全局错误状态，也可dispatch对应的action到Redux
    } finally {
      setLoading(false);
    }
  };

  // 组件渲染逻辑...
  return (
    <button disabled={loading} onClick={() => handleCartUpdate(/* 传入所需data */)}>
      {loading ? '更新中...' : '更新购物车'}
    </button>
  );
};

export default CartComponent;

二、优化方案：抽离API工具函数 #

如果多个组件需要调用同一个API，可将请求逻辑抽成单独的工具文件，避免代码重复：

1. 创建API工具文件src/api/cart.js #

import axios from 'axios';
import { BASE_URL } from '../config';

// 抽离购物车更新的API逻辑
export const updateCartApi = async (cartId, userId, foodId, token) => {
  const res = await axios.patch(`${BASE_URL}/cart/${cartId}`, {
    userId,
    foodId
  }, {
    withCredentials: true,
    headers: { authorization: `Bearer ${token}` }
  });
  return res.data;
};

2. 组件内调用工具函数 #

import { updateCartApi } from '../api/cart';

const CartComponent = () => {
  // ...原有逻辑

  const handleCartUpdate = async (data) => {
    const { cartId, userId, foodId, token } = data;
    setLoading(true);
    setError(null);
    
    try {
      const cartData = await updateCartApi(cartId, userId, foodId, token);
      dispatch(setUserCart(cartData));
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  // ...
};

三、注意事项 #

• 局部状态vs全局状态：组件内用useState管理的loading/error是局部状态，若多个组件需要共享这些状态，可将其移到Redux中，或用自定义Hook封装请求逻辑。
• 代码复用：抽离API工具函数能避免重复代码，同时保持组件和切片的简洁性，是比直接写在组件内更推荐的做法。
• 错误处理：需在catch块中处理API请求失败的情况，可根据需求选择展示局部错误提示或更新全局错误状态。

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