Firebase+React Reducers数据混淆：Redux Store返回错误重复值求助

嘿，我完全懂你现在的困惑——刚上手Redux时，这种状态“串味”的问题真的很让人挠头！你描述的情况明显是状态的更新或读取逻辑出了问题，导致两个列表指向了同一个数据源。我帮你梳理几个最常见的原因和排查方向：

这是最容易出错的地方，比如你可能在处理fetchAdded的action时，错误地更新了Users对应的状态字段，或者反过来。

举个典型的错误示例：

const rootReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'FETCH_USERS_SUCCESS':
      return { ...state, users: action.payload }; // 这里逻辑是对的
    case 'FETCH_ADDED_SUCCESS':
      return { ...state, users: action.payload }; // 错误！应该是`added: action.payload`
    default:
      return state;
  }
}

排查小技巧：打开Redux DevTools，触发fetchAdded后观察状态树里的users和added字段——如果users跟着变，那肯定是这里的字段名写错了。

如果你的初始状态里users和added指向了同一个数组/对象的内存引用，那后续更新其中一个时，另一个也会跟着“同步变化”（本质是它们本来就是同一个东西）。

错误示例：

// 踩坑点：用同一个变量初始化两个状态
const sharedEmptyArray = [];
const initialState = {
  users: sharedEmptyArray,
  added: sharedEmptyArray // 两个状态共享同一个数组引用
};

正确做法：直接创建独立的初始值，比如users: [], added: []，避免复用同一个变量。

如果你的fetchAdded对应的selector错误地读取了state.users而不是state.added，那自然会显示和Users列表一模一样的数据。

错误示例：

// 错误：selector指向了错误的状态分支
export const selectAddedItems = (state) => state.users;
// 正确应该是：
export const selectAddedItems = (state) => state.added;

排查小技巧：在组件里打印两个selector的返回值，看是不是指向了同一个状态字段。

如果你的fetchAdded action creator里，错误地dispatch了更新Users的action类型，也会导致数据串味。

错误示例：

export const fetchAdded = () => async (dispatch) => {
  const data = await api.getAddedItems();
  dispatch({ type: 'FETCH_USERS_SUCCESS', payload: data }); // 错误！应该是`FETCH_ADDED_SUCCESS`
};

快速定位建议 #

先从Redux DevTools入手，触发两个请求后观察状态树的变化：

• 如果状态树里users和added确实有各自的独立数据，那大概率是selector的读取路径写错了；
• 如果其中一个状态字段始终没有被正确更新，那就是reducer或者action creator的逻辑出了问题。

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