无法从Redux Store拉取数据：组件获取数据报错排查

你遇到的核心矛盾是DevTools显示Store已有数据，但组件的提前返回逻辑始终触发，且访问movie[0]时报错。关键要先搞清楚useSelector实际拿到的movie值，不能只看DevTools的表面结果。

可能的原因 #

1. store.mymovies未正确初始化
   如果你的reducer把mymovies的初始状态设成了null，而非包含nowPlayingMovies字段的对象，那么store.mymovies?.nowPlayingMovies会返回undefined。而undefined == null为true，会直接触发提前返回逻辑，哪怕后续数据加载完成，也可能因为状态更新的延迟或异常导致问题。

2. nowPlayingMovies被赋值为undefined
   异步获取电影数据后，若请求失败、payload未正确处理，可能会把undefined赋值给nowPlayingMovies。此时movie为undefined，既会触发提前返回，访问movie[0]也会直接报错。

解决步骤 #

第一步：排查movie的实际值

在组件中添加日志，直接打印相关状态，明确问题根源：

const Container = () => {
  const mymoviesState = useSelector(store => store.mymovies);
  const movie = useSelector(store => store.mymovies?.nowPlayingMovies);
  
  console.log('mymovies整体状态:', mymoviesState);
  console.log('nowPlayingMovies:', movie);

  if (movie == null) return null;

  const newMovie = movie[0];
  console.log(newMovie);

  return (
    <div>
      <VideoBackground />
    </div>
  )
}

通过日志可以直接确认是mymovies本身不存在，还是nowPlayingMovies的值异常。

第二步：修正reducer初始状态

确保mymovies的初始状态是包含nowPlayingMovies的对象，而非null：

// mymovies reducer文件
const initialState = {
  nowPlayingMovies: null, // 初始值设为null，后续加载后替换为数组
};

export default function mymoviesReducer(state = initialState, action) {
  switch (action.type) {
    case 'SET_NOW_PLAYING_MOVIES':
      return {
        ...state,
        nowPlayingMovies: action.payload, // 确保payload是合法数组
      };
    // 其他action逻辑
    default:
      return state;
  }
}

这样store.mymovies始终是对象，store.mymovies?.nowPlayingMovies只会是null或数组，不会出现undefined。

第三步：优化数据有效性判断

把提前返回逻辑改得更严谨，避免非数组类型导致的报错：

// 替换原有的if判断
if (!movie || !Array.isArray(movie) || movie.length === 0) {
  return null; // 也可以返回加载中的占位组件
}

只有当movie是非空数组时，才会执行后续的movie[0]访问逻辑，彻底规避报错。

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