使用createAsyncThunk中间件无法将Rails后端API数据存入Redux Store的问题求助

我仔细看了你的代码，发现几个关键问题导致数据没法正常存入Redux Store，咱们一个个来解决：

1. 错误的Thunk调用方式（两处都有问题） #

你的getDoctors是一个需要接收token参数的异步Thunk，但你在两个地方都没正确调用它：

• 在src/index.js里，你直接dispatch了Thunk函数本身，而不是调用它并传入token：

  // 错误写法
  store.dispatch(getDoctors);
  // 正确写法（假设token存在localStorage中）
  const authToken = localStorage.getItem('authToken');
  store.dispatch(getDoctors(authToken));
  

• 在src/components/DoctorsList.js的useEffect里，同样没传token参数，会导致请求因缺少权限头失败：

  useEffect(() => {
    const authToken = localStorage.getItem('authToken');
    if (authToken) {
      dispatch(getDoctors(authToken));
    }
  }, [dispatch]);
  

2. useSelector的取值逻辑错误 #

你的doctorsReducer初始状态是一个数组，在Store里它对应的key就是doctors，所以直接取state.doctors即可，不需要解构：

// 错误写法
const { doctors } = useSelector((state) => state.doctors);
// 正确写法
const doctors = useSelector((state) => state.doctors);

原来的写法相当于从数组里读取doctors属性，肯定拿不到有效数据。

3. 额外调试建议（帮你快速定位问题） #

• 检查网络请求：打开浏览器DevTools的Network标签，查看/doctors请求的状态码、请求头（确认Authorization是否正确）和响应体（确认返回的JSON确实包含doctors字段）。
• 给extraReducers加日志：在状态切换时打印日志，确认数据是否正常传递：

  extraReducers: {
    [getDoctors.fulfilled]: (state, action) => {
      console.log('拿到的数据:', action.payload);
      return action.payload;
    },
    [getDoctors.pending]: () => console.log('正在请求数据...'),
    [getDoctors.rejected]: (_, action) => console.error('请求失败:', action.error.message)
  },
  

• 用Redux DevTools监控状态：安装Redux DevTools浏览器扩展，实时查看Store中doctors状态的变化，确认数据是否被正确更新。

把这些问题修正后，数据应该就能正常存入Redux Store并在组件中获取到了。

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