Redux中Reducer与Action关联问题：多类型Action无法触发对应Case

嘿，我来帮你梳理下问题所在，以及怎么在不拆分Reducer的前提下解决它～

问题根源分析 #

先拆解下你代码里的几个核心问题：

1. 异步Action未被正确处理：你的Action Creator直接返回了axios的Promise对象，但Redux默认只能处理同步的普通对象action。这导致Reducer收到的payload其实是个未完成的Promise，而非请求成功后的响应数据，action.payload.data大概率是undefined，状态更新自然异常。
2. Reducer状态结构设计不合理：你的state初始是一个数组，每个case都直接替换整个state。这意味着不管触发哪个action，之前的状态都会被覆盖——比如先调用getAgeOptions，state变成年龄选项；再调用getBindingTypeOptions，state就会被替换成绑定类型选项，之前的年龄数据直接丢失。这应该就是你觉得“mapStateToProps获取的是同一值”的核心原因，而非真的只触发了第一个case。
3. 补充：你的switch case逻辑本身没问题，每个case都用return退出了switch，不会出现“触发多个case”的情况，所以“仅触发第一个case”大概率是状态覆盖导致的误解。

解决方案（不拆分Reducer） #

步骤1：配置Redux-Thunk处理异步Action

Redux需要中间件来处理异步逻辑，我们用最常用的redux-thunk：

• 先安装依赖：

  npm install redux-thunk
  # 或者用yarn
  yarn add redux-thunk
  

• 在创建Store时应用中间件：

  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  import yourOptionsReducer from './path/to/your/reducer';
  
  const store = createStore(
    yourOptionsReducer,
    applyMiddleware(thunk)
  );
  

• 修改Action Creator，让它们返回函数来处理异步流程，在请求成功后再dispatch真正的action：

  export function getAgeOptions() {
    return (dispatch) => {
      const url = `${ROOT_OPTIONS_URL}/age`;
      axios.get(url)
        .then(response => {
          dispatch({ 
            type: GET_AGE_OPTIONS, 
            payload: response 
          });
        })
        .catch(error => {
          console.error('获取年龄选项失败:', error);
          // 这里也可以dispatch一个错误类型的action，方便后续处理
        });
    }
  }
  
  // 同理修改另外两个Action Creator
  export function getAgeAppropriateOptions() {
    return (dispatch) => {
      const url = `${ROOT_OPTIONS_URL}/ageappropriate`;
      axios.get(url)
        .then(response => {
          dispatch({ 
            type: GET_AGE_APPROPRIATE_OPTIONS, 
            payload: response 
          });
        })
        .catch(error => {
          console.error('获取适龄选项失败:', error);
        });
    }
  }
  
  export function getBindingTypeOptions() {
    return (dispatch) => {
      const url = `${ROOT_OPTIONS_URL}/bindingtype`;
      axios.get(url)
        .then(response => {
          dispatch({ 
            type: GET_BINDING_TYPE_OPTIONS, 
            payload: response 
          });
        })
        .catch(error => {
          console.error('获取绑定类型选项失败:', error);
        });
    }
  }
  

步骤2：重构Reducer的状态结构

把state改成对象，每个属性对应不同的选项集合，这样每个action只会更新对应的属性，不会覆盖整个状态：

import {GET_AGE_APPROPRIATE_OPTIONS, GET_AGE_OPTIONS, GET_BINDING_TYPE_OPTIONS} from "../actions/options-actions"

// 初始状态改为对象，每个key对应一类选项
const initialState = {
  ageOptions: [],
  ageAppropriateOptions: [],
  bindingTypeOptions: []
};

export default function(state = initialState, action){
  switch(action.type){
    case GET_AGE_APPROPRIATE_OPTIONS:
      // 用扩展运算符保留原有状态，只更新对应属性
      return {
        ...state,
        ageAppropriateOptions: action.payload.data
      };
    case GET_AGE_OPTIONS:
      return {
        ...state,
        ageOptions: action.payload.data
      };
    case GET_BINDING_TYPE_OPTIONS:
      return {
        ...state,
        bindingTypeOptions: action.payload.data
      };
    // 务必保留default分支，返回原状态
    default:
      return state;
  }
}

步骤3：更新mapStateToProps获取对应数据

现在state是对象结构，你可以精准获取每一类选项数据：

const mapStateToProps = (state) => {
  return {
    ageOptions: state.ageOptions,
    ageAppropriateOptions: state.ageAppropriateOptions,
    bindingTypeOptions: state.bindingTypeOptions
  };
};

额外小提示 #

• 如果你后续觉得单个Reducer代码太长，可以用Redux的combineReducers把不同逻辑的Reducer合并，但目前你的需求用单个Reducer完全没问题。
• 可以给每个请求加上loading或错误状态，方便在UI上展示加载提示或错误信息，提升用户体验。

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