Redux新手求助：Reducer返回数组后组件Map遍历异常问题

Hey there! As someone who's stumbled through early Redux pitfalls, I totally get where you're coming from—this is one of the most common gotchas when you're just starting out with immutable state updates. Let's break down exactly what's happening and how to fix it.

The Root Cause: Redux's Immutable State Rule #

Redux relies on reference changes to detect when state has updated, which triggers your components to re-render. If your reducer modifies the original array (instead of returning a brand new array), Redux won't pick up the change, so your component never re-runs the map operation you're trying to do.

Let's Compare Your Two Reducer Writeups #

First, let's look at what's likely going wrong in your first (broken) reducer:

// ❌ 错误的写法：修改原数组或返回相同引用
const videoReducer = (state = [], action) => {
  switch(action.type) {
    case 'FETCH_VIDEOS_SUCCESS':
      // 这里要么是直接修改原数组（比如state.push(...action.payload)）
      // 要么是直接赋值原状态变量然后返回（state = action.payload; return state）
      state.push(...action.payload);
      return state;
    default:
      return state;
  }
}

In this case, you're mutating the original state array and returning the same reference. Redux's shallow comparison will see that the array reference hasn't changed, so it won't tell your component to re-render—hence your renderVideos function never fires to log the elements.

Now here's what your working second reducer is probably doing right:

// ✅ 正确的写法：返回新的数组引用
const videoReducer = (state = [], action) => {
  switch(action.type) {
    case 'FETCH_VIDEOS_SUCCESS':
      // 用展开运算符创建一个全新的数组
      return [...action.payload];
      // 如果需要合并原有状态和新数据，用：return [...state, ...action.payload]
    default:
      return state;
  }
}

By returning a new array (either via the spread operator or array methods like map/filter that return new arrays), you're giving Redux a new reference to detect. This triggers the component to re-render, and your map operation will run as expected.

How to Verify This in Your Component #

If you're using useSelector to grab the state in your component, it's doing a shallow comparison under the hood. For example:

const videos = useSelector(state => state.videos);

const renderVideos = () => {
  console.log('Rendering videos!');
  return videos.map(video => {
    console.log(video);
    return <div key={video.id}>{video.title}</div>;
  });
}

If the videos array reference never changes, useSelector won't update the videos variable, so renderVideos never gets called again after the initial render.

Quick Fix Checklist #

• Never mutate the original state in your reducer—no push, pop, splice, or direct assignment to state properties.
• Always return a new array when updating array state:
  • Use the spread operator: [...oldArray, newItem]
  • Use array methods that return new arrays: oldArray.filter(...), oldArray.map(...)
• Even if action.payload is already an array, returning it directly works (since it's a new reference from your API response), but if you're modifying existing state, always create a copy first.

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