Redux切换视图调用API后无关联state被覆盖为undefined问题求助

问题根因 #

你在/actions/profil.js中定义的action type和news模块的action type完全重复，导致两个reducer都会响应对方的动作：

// 错误代码 /actions/profil.js
export const GET_PROFIL_SUCCESS = 'GET_NEWS_SUCCESS' // 这里错误写成了news的成功type
export const GET_PROFIL_FAILURE = 'GET_NEWS_FAILURE' // 这里错误写成了news的失败type

当你进入个人主页触发getProfil请求成功后，dispatch的GET_PROFIL_SUCCESS实际对应的type值是GET_NEWS_SUCCESS，news的reducer会匹配到这个动作，执行逻辑：

// news reducer逻辑
case GET_NEWS_SUCCESS:
  return {
    ...state,
    loading: false,
    list: action.news // 你profil的动作里payload只有profil字段，没有news字段，所以list被赋值为undefined
  }

这就是你返回新闻页时新闻列表变成undefined的直接原因。

其他附带错误 #

1. 个人页取值错误：profil reducer里把接口返回存在了profil字段下，但你页面里取的是state.profil.infos，会导致个人信息永远取不到
2. 新闻下拉加载状态错误：news reducer里PULL_LOADING动作赋值的是update_loading字段，但你页面取的是pull_loading，下拉刷新的加载状态会失效

修复方案 #

1. 修正profil模块的action type定义，修改/actions/profil.js：

export const GET_PROFIL_SUCCESS = 'GET_PROFIL_SUCCESS'
export const GET_PROFIL_FAILURE = 'GET_PROFIL_FAILURE'

优化建议：不同模块的通用action type（如LOADING、RESET_LOADING等）建议加上模块前缀，比如改成PROFIL_LOADING、NEWS_LOADING，避免不同模块的通用动作互相干扰。

2. 修正个人页的取值逻辑，修改/screens/delivererProfil.js：

// 原来的
const profil = useSelector(state => state.profil.infos)
// 改成
const profil = useSelector(state => state.profil.profil)

3. 修正news reducer的下拉加载字段，修改/reducers/news.js：

case PULL_LOADING:
  return {
    ...state,
    pull_loading: true, // 把update_loading改成pull_loading
  }

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