Reducers 和 switch 语句

Question

我对 redux 有点新，我仍然不完全理解类型和 actionCreator 的联系。我在创建的测试类中有以下代码：

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

export default function(state = [], action){
    switch(action.type){
        case GET_AGE_APPROPRIATE_OPTIONS:
            return action.payload.data;
        case GET_AGE_OPTIONS:
            return action.payload.data;
        case GET_BINDING_TYPE_OPTIONS:
            return action.payload.data;
    }
    return state
}

虽然我有以下代码，但在我的动作创建器中：

import axios from 'axios';
const ROOT_URL = `http://localhost:8080/`;
const ROOT_OPTIONS_URL = `${ROOT_URL}options`;

export const GET_AGE_OPTIONS = 'GET_AGE_OPTIONS';
export const GET_AGE_APPROPRIATE_OPTIONS = 'GET_AGE_APPROPRIATE_OPTIONS';
export const GET_BINDING_TYPE_OPTIONS = 'GET_BINDING_TYPE_OPTIONS';

export function getAgeOptions() {
    const url = `${ROOT_OPTIONS_URL}/age`;
    const request = axios.get(url);
    return {
        type: GET_AGE_OPTIONS,
        payload: request

    }
}

export function getAgeAppropriateOptions() {
    const url = `${ROOT_OPTIONS_URL}/ageappropriate`;
    const request = axios.get(url);
    return {
        type: GET_AGE_APPROPRIATE_OPTIONS,
        payload: request

    }
}

export function getBindingTypeOptions() {
    const url = `${ROOT_OPTIONS_URL}/bindingtype`;
    const request = axios.get(url);
    return {
        type: GET_BINDING_TYPE_OPTIONS,
        payload: request

    }
}

问题是当我调用其中一个函数时，它只调用了 reducer 的 case 语句的第一部分。由于我的 actionCreator 传递了不同的类型，我会认为它会切换细节。但是仔细想想，我看不到如何在不同的动作上调用减速器，因为我是在使用 mapDispatchToProps 之后直接调用动作的。但是这种情况下的 mapStateToProps 都将调用相同的 case 语句，因此对 mapStateToProps 采用相同的值。那么，当我调用我的操作时，如何让减速器调用我需要的类型呢？我发现让它工作的唯一方法是将所有选项分离到单独的减速器文件中，然后在组合减速器中调用减速器案例的正确部分。但它有很多文件，并且必须在我的 combineReducers 中调用多个文件。我只是想获得选项，我正在寻找手动组合它的方法。

Answer 1

一个reducer可以有多个选项。

const defaultState = {
  ageAppropriateOptions: [],
  ageOptions: [],
  bindingTypeOptions: []
};

export default function(state = defaultState, 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
            };
    }
    return state
}