redux-api-middleware中两个API调用状态被覆盖问题求助

Hey there! 我来帮你分析下为什么fetchMessage('Hi!')和fetchUser()的状态会互相覆盖，这其实是Redux状态更新时的常见问题，咱们一步步拆解：

核心原因：状态更新时没有正确保留原有状态 #

Redux的reducer是纯函数，每次更新状态都要返回新的状态对象，如果你的reducer处理两个API的成功action时，直接返回只包含当前字段的对象，而没有合并原有状态，就会导致后一次调用覆盖前一次的结果。

举个反例（你代码里可能存在的问题）：

// 错误的reducer写法
function rootReducer(state = {}, action) {
  switch(action.type) {
    case 'FETCH_MESSAGE_SUCCESS':
      return { message: action.payload }; // 直接替换整个state，丢失user字段
    case 'FETCH_USER_SUCCESS':
      return { user: action.payload }; // 直接替换整个state，丢失message字段
    default:
      return state;
  }
}

正确的解决方式 #

1. 在reducer中合并原有状态 #

修改reducer，使用扩展运算符(...state)保留原有状态，只更新对应的字段：

// 正确的reducer写法
function rootReducer(state = {}, action) {
  switch(action.type) {
    case 'FETCH_MESSAGE_SUCCESS':
      return { ...state, message: action.payload }; // 保留原有state的所有字段，更新message
    case 'FETCH_USER_SUCCESS':
      return { ...state, user: action.payload }; // 保留原有state的所有字段，更新user
    default:
      return state;
  }
}

2. 拆分独立的reducer（更推荐的实践） #

把message和user的状态管理拆分到各自的reducer里，再用combineReducers合并，这样两个状态分支完全独立，根本不会互相影响：

// messageReducer.js
export default function messageReducer(state = null, action) {
  switch(action.type) {
    case 'FETCH_MESSAGE_SUCCESS':
      return action.payload;
    default:
      return state;
  }
}

// userReducer.js
export default function userReducer(state = null, action) {
  switch(action.type) {
    case 'FETCH_USER_SUCCESS':
      return action.payload;
    default:
      return state;
  }
}

// 合并reducer
import { combineReducers } from 'redux';
import messageReducer from './messageReducer';
import userReducer from './userReducer';

export default combineReducers({
  message: messageReducer,
  user: userReducer
});

之后在组件的mapStateToProps里，分别从state.message和state.user获取对应状态即可。

3. 确认action类型的唯一性 #

确保两个API调用对应的action类型（包括REQUEST/SUCCESS/FAILURE）是完全不同的，比如FETCH_MESSAGE_SUCCESS和FETCH_USER_SUCCESS，避免reducer混淆处理不同的action。

结合你的App.js代码来看 #

从你提供的代码里，我注意到你的reducer可能没有正确合并状态，或者没有拆分独立的reducer分支。按照上面的方式调整后，两个API调用的状态就会各自保留，不会互相覆盖了。

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