合并两个Redux Reducer后列表map函数报错的问题求助

核心原因 #

合并reducer后，Redux根state的结构发生了变化。之前只用单个reducer时，根state直接是ordersReducer管理的状态；现在拆分后，根state变成了包含tovars和login两个子对象的结构，所有原ordersReducer下的状态都嵌套在state.tovars中。你的组件里还是按照旧路径获取状态，导致拿到的tovars不是数组，触发map is not a function错误。

修复步骤 #

1. 修正useSelector的状态获取路径 #

把组件里所有获取原ordersReducer状态的useSelector调用，都加上state.tovars前缀：

// 原代码
const tovars = useSelector(tovarsList);
const showBasket = useSelector((state) => state.showBasket);
const displayedTovars = useSelector((state) => state.displayedTovars)

// 修改后
const tovars = useSelector(state => state.tovars.tovarsList); // 假设tovarsSlice里的数组字段是tovarsList
const showBasket = useSelector((state) => state.tovars.showBasket);
const displayedTovars = useSelector((state) => state.tovars.displayedTovars)

如果tovarsList是你定义的选择器函数，也要同步修改这个选择器，让它从state.tovars中取值：

// 原选择器
export const tovarsList = (state) => state.tovarsList;

// 修改后
export const tovarsList = (state) => state.tovars.tovarsList;

2. 确保Slice初始状态的数组类型 #

检查tovarsSlice的初始状态，保证存储商品列表的字段是数组类型，比如：

const initialState = {
  tovarsList: [], // 初始化为空数组
  showBasket: false,
  displayedTovars: 6,
  // 其他状态字段
}

这样即使接口还未返回数据，初始状态也是数组，不会触发map报错。

验证 #

修改后重新运行项目，此时tovars能正确获取到数组类型的商品列表，map函数即可正常工作。

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