Redux Toolkit向state数组加action.payload时出现undefined问题

存入undefined的核心原因是flash对象根本没有被作为payload传递给Redux action，问题出在你自定义的addHero包装函数：

// 该函数未定义任何入参
const addHero = () => {
  // 调用action creator时未传任何参数，生成的action无payload
  dispatch(actions.addHero());
};

你在handleClick中调用addHero(flash)时，传入的flash参数被这个无入参的包装函数直接丢弃，最终dispatch的action没有携带有效载荷，因此reducer中读取到的action.payload就是undefined。
createSlice自动生成的action creator默认会将传入的第一个参数作为action.payload，不传参时payload值即为undefined。

两种改法任选其一即可：

• 方案1：修改包装函数透传参数
  调整addHero函数，让它接收入参并传递给action creator：

  const addHero = (hero) => {
    dispatch(actions.addHero(hero));
  };
  

• 方案2：移除多余包装函数，直接dispatch
  删掉单独定义的addHero函数，在点击事件逻辑里直接调用dispatch：

  const handleClick = () => {
    const flash = {name:"flash"};
    dispatch(actions.addHero(flash));
  };
  

你当前的store配置直接将slice reducer作为根reducer传入configureStore，根state结构和slice的initialState完全一致，即state = { roster: [{name: "batman"}] }，现有useSelector((state) => state.roster)的写法是正确的，不需要调整。
修复完成后点击按钮，state中的roster数组就会变成预期的[{name: "batman"}, {name: "flash"}]。

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