使用Redux Toolkit开发时出现store is undefined报错如何解决？

以下是对应问题的修复步骤：

• 根组件未包裹Redux Provider导致store未注入
  这是报Store is Undefined的核心原因，你需要在项目入口文件（通常是src/index.js）中用Provider组件包裹你的整个应用，将创建好的store传入：

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

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

• 存入store的接口数据格式错误
  你现在直接把axios返回的完整response对象存入了store，而接口返回的帖子列表实际存放在response.data中，调整Posts组件的请求逻辑：

axios.get("https://jsonplaceholder.typicode.com/posts")
  .then((response) => {
    console.log("fetched");
    dispatch(setPosts(response.data)); // 只把帖子数组存入store
  })
  .catch((e) => console.log(e));

• 渲染判断条件错误+缺少依赖导入
  首先你需要在Posts组件顶部导入useEffect：

import React, { useEffect } from 'react'

其次你注释的渲染代码判断逻辑写反了，!posts会在posts不存在的时候才执行遍历，直接触发报错。调整渲染逻辑如下：

{posts.length > 0 && posts.map((post) => (
  <Col
    xs={3}
    style={{
      margin: "15px",
      cursor: "pointer",
      border: "1px black solid",
    }}
    key={post.id} // 必须添加key属性避免React警告
  >
    <div className="post__data">
      <img alt="image" src={img} />
      {post.title}
      <Link to={"/post/" + post.id}>See more</Link>
    </div>
  </Col>
))}

• 补充：检查userSlice文件顶部是否导入了createSlice
  如果你的userSlice代码没加导入语句，需要在第一行添加：

import { createSlice } from "@reduxjs/toolkit";

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