Redux Toolkit调用API存数据后useSelector返回undefined问题求助

问题排查及修复方案 #

1. 核心错误点 #

• thunk函数导入错误：你单独定义的loadCurrencyList是外部异步thunk，没有被纳入currencyListSlice自动生成的actions集合中，组件里从currencyListSlice.actions解构拿到的是undefined，dispatch没有触发实际的异步请求。
• store取值键名不匹配：你在configureStore中注册的reducer键名为小写开头的currencyList，但组件内useSelector取的是大写开头的state.CurrencyList，键名不匹配自然取不到值，所以输出undefined。
• （可选语法错误）你代码中fetch(API-Key)的变量名不符合JS规范，JS变量不能包含横杠，建议改为API_KEY这类下划线命名的格式。

2. 快速修复代码 #

组件导入部分修正

// 删掉错误的从slice.actions解构的逻辑
// const { loadCurrencyList } = currencyListSlice.actions
// 直接导入你单独导出的thunk函数
import { loadCurrencyList } from '../../Reducers/CurrencyListReducer'

选择器取值修正

// 改成和store注册的键名完全一致
const selectCurrencyList = state => state.currencyList

3. 更符合Redux Toolkit规范的写法（可选优化） #

推荐用RTK内置的createAsyncThunk处理异步请求，避免手动写dispatch逻辑：

// CurrencyListReducer 修正后代码
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit"

// 定义异步请求thunk
export const loadCurrencyList = createAsyncThunk(
  'currencyList/loadCurrencyList',
  async () => {
    const res = await fetch(API_KEY) // 替换为你的实际接口地址变量
    return await res.json()
  }
)

const options = {
  name: 'currencyList',
  initialState: [],
  reducers: {},
  // 监听异步请求完成事件，更新state
  extraReducers: (builder) => {
    builder.addCase(loadCurrencyList.fulfilled, (state, action) => {
      return action.payload
    })
  }
}

export const currencyListSlice = createSlice(options)

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