Redux中useSelector无法正常获取全部预期数据该如何解决？

问题修复方案 #

核心问题原因 #

1. 状态取值不匹配：你直接将carReducer作为根reducer传入store，没有使用combineReducers挂载到cars字段下，同时store初始化时传入的空对象initialState = {}覆盖了reducer默认的数组初始值，导致useSelector(state => state.cars)无法取到对应值，返回undefined。
2. useEffect无限触发：未给useEffect添加依赖数组，每次组件渲染都会重新发起请求，造成不必要的性能损耗甚至死循环。

修复步骤 #

方案一：极简修复（适合单reducer场景，不需要调整reducer结构）

1. 修正useSelector的取值逻辑，直接取根state（根state本身就是cars数组）：

// Component.jsx
const cars = useSelector(state => state);

2. 删除Store.js中多余的初始值参数，避免覆盖reducer的默认初始值：

// Store.js
const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

3. 给useEffect添加空依赖数组，只在组件挂载时发起一次请求：

// Component.jsx
useEffect(() => {
  dispatch(retrieveCars());
}, []);

方案二：规范写法（方便后续扩展多reducer）

1. 先使用combineReducers将carReducer挂载到cars字段下，调整根reducer配置：

// reducers/index.js 或者直接在Store.js中修改
import { combineReducers } from 'redux';
import carReducer from './carReducer';

const rootReducer = combineReducers({
  cars: carReducer
})

2. 保持原有的useSelector(state => state.cars)取值逻辑不变，同时给useEffect添加空依赖数组即可。

你已经确认action返回的payload是对象数组，因此reducer直接返回payload的逻辑不需要调整，按以上方案修改后即可正常渲染列表。

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