mapStateToProps可获取store属性但Redux DevTools显示为空且数据不渲染

• map遍历无返回值：Bugs组件中对props.bugs执行map遍历的时候，回调函数用了花括号包裹但没有写return语句，导致每一项遍历返回值都是undefined，自然无法渲染出li标签内容。
• store重复初始化：你把configureStore的逻辑写在了App函数组件内部，每次App组件重新渲染都会生成一个全新的store实例，之前触发action更新的状态会被直接清空，所以Redux DevTools中看不到状态变更，渲染时拿到的也是新store的初始空值。
• 状态取值路径不匹配：从你代码里的getBugList选择器逻辑可以看出，你配置store时是把bugs reducer挂载到了state.entities.bugs节点下，但你在mapStateToProps中直接取state.bugs，取值路径错误也会导致拿不到正确的状态值。

1. 修正map遍历写法
   两种写法二选一即可，注意必须给li添加唯一key属性：

// 写法1：用圆括号隐式返回
props.bugs.map(bug => (
  <li key={bug.id}>
    {bug.description}
  </li>
))

// 写法2：添加return关键字
props.bugs.map(bug => {
  return <li key={bug.id}>
    {bug.description}
  </li>
})

2. 把store初始化逻辑移到App组件外部
   全局只初始化一次store，避免重复创建丢失状态：

// App.js修改后
const store = configureStore() // 移到组件外层
function App() {
  return (
    <Provider store={store}>
      <Bugs />
    </Provider>
  );
}
export default App;

3. 修正状态取值路径
   如果你的bugs reducer确实挂载在entities节点下，修改mapStateToProps的取值逻辑：

const mapStateToProps = state => {
  console.log('Aftab', state.entities.bugs);
  return {
    bugs: state.entities.bugs
  }
}

同时要确认你在configureStore时已经正确注册了bugs reducer，示例如下：

import { configureStore } from '@reduxjs/toolkit'
import bugsReducer from './你的reducer文件路径'

const store = configureStore({
  reducer: {
    entities: {
      bugs: bugsReducer
    }
  }
})

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