Redux Toolkit问题：Async Thunk无法正确关联Reducer

你的核心问题在于Async Thunk 的用法错误，以及 slice 里的状态字段不匹配，下面是具体修复步骤：

1. 修正 Async Thunk 代码 #

Async Thunk 不需要手动调用 action creator，而是要返回异步获取的数据，Redux Toolkit 会自动根据请求状态（pending/fulfilled/rejected）生成对应的 action，传递给 slice 处理。

修改后的 prizes-actions.js：

import { createAsyncThunk } from '@reduxjs/toolkit'
import * as api from '../apiClient'

export const fetchPrizeData = createAsyncThunk(
  'prizes/fetchPrizeData', // 命名与 slice 名称对齐，更清晰
  async () => {
    const data = await api.getAllPrizes()
    console.log(data)
    return data // 必须返回数据，Redux 会自动将其作为 payload 传入 fulfilled action
  }
)

2. 修正 Slice 代码 #

普通的 reducers 只能处理同步 action，Async Thunk 的异步 action 需要用 extraReducers 监听。同时你要修正状态字段的匹配问题（initialState 是 prizesArray，但原代码给 state.prizes 赋值）。

修改后的 prizes-slice.js：

import { createSlice } from '@reduxjs/toolkit'
import { fetchPrizeData } from './prizes-actions'

const prizesSlice = createSlice({
  name: 'prizes',
  initialState: {
    prizesArray: [],
    loading: false, // 可选：添加加载状态，方便处理页面加载中UI
    error: null // 可选：添加错误状态，处理请求失败场景
  },
  reducers: {
    // 如果没有同步 action 需求，这里可以留空
  },
  extraReducers: (builder) => {
    builder
      // 请求发起时的状态
      .addCase(fetchPrizeData.pending, (state) => {
        state.loading = true
        state.error = null
      })
      // 请求成功时的状态
      .addCase(fetchPrizeData.fulfilled, (state, action) => {
        state.loading = false
        console.log('异步请求成功，数据：', action.payload)
        state.prizesArray = action.payload // 与 initialState 的字段保持一致
      })
      // 请求失败时的状态
      .addCase(fetchPrizeData.rejected, (state, action) => {
        state.loading = false
        state.error = action.error.message || '奖品数据请求失败'
        console.log('请求失败原因：', action.error)
      })
  }
})

export const prizesSliceActions = prizesSlice.actions
export default prizesSlice

3. 组件内获取状态（可选） #

如果需要在组件中使用获取到的数据，用 useSelector 从 store 中读取：

import { useSelector } from 'react-redux'

// 组件内部
const { prizesArray, loading, error } = useSelector(state => state.prizes)

错误原因总结 #

• 原 Async Thunk 中直接调用 prizesSliceActions.getPrizes(data) 只是创建了一个 action 对象，但没有通过 dispatch 发送，所以 slice 的 reducer 根本接收不到这个 action，导致 console.log('hello') 不执行。
• slice 中 initialState 的字段是 prizesArray，但原 reducer 给 state.prizes 赋值，字段不匹配，就算 action 触发也无法正确更新状态。
• Async Thunk 属于异步 action，必须用 extraReducers 监听，普通 reducers 只能处理同步 action。

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