Redux请求成功但columnDefs未更新、store状态未变更问题咨询

排查步骤 #

• 检查异步请求中间件配置
  你当前的getMarketingProspects返回的是携带payload.request的action，该格式需要对应异步中间件（常见为redux-axios-middleware）拦截处理，才会在请求完成后自动触发GET_MARKETING_SUCCESS/GET_MARKETING_FAIL类型的action。如果没有配置对应中间件，只会触发初始的GET_MARKETING_LIST，不会执行后续更新逻辑。
• 校验action类型常量一致性
  确认GET_MARKETING_LIST、GET_MARKETING_SUCCESS、GET_MARKETING_FAIL三个常量在reducer、action创建函数、中间件配置中是从同一个文件导入的，无拼写错误、大小写错误。
• 通过Redux DevTools确认action触发流程
  打开浏览器Redux DevTools插件，触发请求后观察：
  1. 有没有GET_MARKETING_SUCCESS类型的action被触发？如果没有，优先排查中间件配置、请求是否真的返回成功（可在Network面板确认接口返回200且无报错）
  2. 如果有该action被触发，检查action的payload结构，确认action.payload.data.column_headers.columnDefs路径真实存在，可能存在后端返回结构与预期不符、字段拼写错误（比如下划线和驼峰不匹配）的问题。
• 检查reducer挂载路径
  确认MarketReducer在combineReducers中挂载的key和你组件中取数的路径一致，比如挂载时命名为market，取值时需要用state.market.columnDefs，不要跳过层级取数。

常见修复方案 #

1. 配置异步中间件示例（以redux-axios-middleware为例） #

import axios from 'axios';
import { createStore, applyMiddleware } from 'redux';
import axiosMiddleware from 'redux-axios-middleware';
import rootReducer from './reducers';

const client = axios.create({
  baseURL: '/api',
  responseType: 'json'
});

const store = createStore(
  rootReducer,
  applyMiddleware(axiosMiddleware(client))
);

2. 优化reducer取值逻辑，增加兜底避免报错 #

case GET_MARKETING_SUCCESS:
  return {
    ...state,
    // 增加可选链和兜底，避免路径不存在时报错
    columnDefs: action.payload?.data?.column_headers?.columnDefs || []
  };

3. 统一常量导入 #

所有action类型统一从constants/actionTypes.js等公共文件导入，避免手写字符串导致的拼写错误。

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