React Hooks开发中控制台可见Action与State但应用取值为undefined无数据渲染

问题根因 #

• 状态读取路径与Store结构不匹配
  你通过combineReducers挂载的根状态节点为fetchMetrics：

  const rootReducer = combineReducers({
    fetchMetrics
  });
  

  但组件内通过useSelector读取的是state.metricsList，该路径不存在于根状态中，因此catalog始终为undefined，无数据可用于渲染。
• Reducer与Action Creator同名造成命名冲突
  你将处理指标数据的Reducer函数直接命名为fetchMetrics，和发起API请求的Action Creator重名，不仅提升了代码维护成本，也直接导致了状态节点命名与读取路径不匹配的问题。
• 错误处理逻辑存在语法错误
  请求失败时dispatch的payload为console.log(e)，该表达式无有效返回值，实际payload为undefined，无法传递错误信息到状态层。

修复方案 #

1. 重构Reducer命名与Store挂载节点，统一状态读取路径
   先将原Reducer函数重命名为语义更清晰的metricsReducer，同时合并逻辑完全相同的switch分支：

   const metricsReducer = (
     state = initialState,
     action: MetricAction
   ): MetricState => {
     switch (action.type) {
       case ACTION_TYPES.FETCH_METRICS:
       case ACTION_TYPES.CHOOSE_METRIC:
         return {
           ...state,
           metrics: action.payload
         };
       default:
         return state; // 无需变更状态时直接返回原引用，避免不必要的重渲染
     }
   };
   

   再在combineReducers时将该Reducer挂载为metricsList，与组件读取路径完全对应：

   const rootReducer = combineReducers({
     metricsList: metricsReducer
   });
   

2. 校验中间件配置
   你的Action Creator返回的是Thunk函数，需确保middleware数组中已引入redux-thunk，否则dispatch无法识别函数类型的返回值，API请求不会触发。若已确认控制台能正常发起请求可跳过此步。
3. 修复错误处理逻辑
   替换catch中的payload取值，传递有效错误信息：

   catch (e) {
     dispatch({
       type: ACTION_TYPES.FAILURE,
       payload: e instanceof Error ? e.message : '请求失败'
     });
   }
   

4. 组件渲染增加空值兜底
   避免状态未加载完成时出现undefined报错：

   {catalog?.metrics?.map(metric => (
     // 列表渲染逻辑
   ))}
   

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