旧Redux重构为Redux-Toolkit后从store取数据返回undefined

排查与解决步骤 #

• 第一步：确认入口文件已正确挂载Redux Provider
  90%以上的同类问题都是因为没有将App组件包裹在Redux Provider内，入口文件（通常为index.tsx）代码示例如下：

  import React from 'react'
  import ReactDOM from 'react-dom/client'
  import { Provider } from 'react-redux'
  import { store } from './store/reduxStore'
  import App from './App'
  
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <Provider store={store}>
      <App />
    </Provider>
  )
  

• 第二步：校验接口返回结构是否符合预期
  你当前异步逻辑中默认接口返回{ tables: TableI[] }结构，若接口直接返回TableI[]数组，response.data.tables就会返回undefined，最终导致state.tables被赋值为undefined。请在fetchAllTables中新增打印确认返回结构：

  const response = await axios.get<RetrieveTables>("http://localhost:5000/tables");
  console.log('接口返回原始数据：', response.data) // 新增该行打印
  // 如果打印结果为数组，将return语句改为：return response.data
  return response.data.tables;
  

• 第三步：校验store结构与选择器逻辑
  在App.tsx中临时打印完整store状态，确认reducer是否正确挂载：

  // 新增该行打印完整store
  const fullStore = useSelector(state => state)
  console.log('完整store结构：', fullStore)
  const tables: Array<TableI> = useSelector(tablesSelector);
  console.log(tables)
  

  若打印的fullStore中没有tables字段，请检查store中tablesReducer的引入路径是否正确。

• 第四步：修复代码中的语法与类型问题

  1. 删除App.tsx中const dispatch = useDispatch();**末尾多余的两个星号，避免编译错误
  2. 移除tablesSlice声明时的any类型标注，避免类型问题被掩盖：

  // 错误写法
  // const tablesSlice: any = createSlice({...})
  // 正确写法，让TS自动推导类型
  const tablesSlice = createSlice({...})
  

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