使用Redux Toolkit拉取数据失败，开发者工具查看状态为空如何解决？

问题排查点按优先级排列如下： #

• 未触发异步thunk
  你编写的getCoins需要手动dispatch才会发起请求拉取数据，需要在对应组件的useEffect中触发，示例代码如下：

import { useDispatch, useSelector } from 'react-redux'
import { getCoins } from './coins/coinSlice'
import { useEffect } from 'react'

function CoinList() {
  const dispatch = useDispatch()
  // 取数据时要对应你store里注册的reducer key `coin`
  const { coins, status } = useSelector(state => state.coin)

  useEffect(() => {
    // 必须调用dispatch触发thunk
    dispatch(getCoins())
  }, [dispatch])
}

• 未给应用挂载Redux Provider
  必须在应用入口文件将根组件包裹在Provider中，store才会生效，入口文件示例配置：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import { Provider } from 'react-redux'
import store from './store.js' // 替换为你实际的store文件路径

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
)

• 检查请求是否正常响应
  打开浏览器开发者工具的「网络」面板，确认https://jsonplaceholder.typicode.com/users请求状态为200，无跨域、拦截等异常。同时确认你已安装axios依赖，可执行npm i axios完成安装。
• 注意拼写和状态取值路径

1. 你代码中fulfilled拼写错误，写成了fullfilled（多了1个l），如果是按正确拼写筛选状态会匹配不到，建议修正为标准拼写。
2. 你的store中注册的reducer key为coin，所有状态都在state.coin层级下，不要在Redux DevTools或取值时找错路径。

内容的提问来源于stack exchange，提问作者Tolga Günaydın