Asynchronous 操作创建者处理axios get.request，并具有参数的状态访问权限

我正在尝试将一些值从组件传递给正在使用axios执行get请求的动作创建者。我试图遵循丹·阿布拉莫夫的模式：

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

但是我不能让它工作。我认为我在两个层面上有问题：我的组件和我的动作创建者。能有人帮忙就太好了

我的组成部分：

const timeR = ({ 
  selectedTimeRange,
  timeRange = [],
  onTimeChange }) => {
  return (
    <div>
      <div>
        Filters:
        <div>
          Year:
          <select
            defaultValue={selectedTimeRange}
            onChange={onTimeChange}>
            <option value="all" >All</option>
            {timeRange.map((y, i) =>
              <option key={i} value={y}>{y}</option>
            )}
          </select>
        </div>
    </div>
  </div>
  );
}


function mapStateToProps(state) {
    var range = ['30daysAgo', '15daysAgo', '7daysAgo'];
  return {
      selectedTimeRange: state.timeReducer.timerange[0],
      timeRange: range 
  };
};

const mapDispachToProps = (dispatch) => {
  return {
  onTimeChange: (e) => {dispatch (onSetTimeRange(e.target.value));},

  };
};

const TimeRange = connect(mapStateToProps, mapDispachToProps)(timeR);

export default TimeRange;

下面是处理axios.get的操作：

export const fetchgadata = () => (dispatch) => {
    dispatch({
        type: 'FETCH_DATA_REQUEST',
        isFetching:true,
        error:null
  });

var VIEW_ID = "ga:80820965";

return axios.get("http://localhost:3000/gadata", {
  params: {
    id: VIEW_ID
  }
}).then(response => {
      dispatch({
            type: 'FETCH_DATA_SUCCESS',
            isFetching: false,
            data: response.data.rows.map( ([x, y]) => ({ x, y }) )
      });
    })
    .catch(err => {
      dispatch({
            type: 'FETCH_DATA_FAILURE',
            isFetching:false,
            error:err
      });
      console.error("Failure: ", err);
    });
};

我的问题：

如何将这两个动作结合起来。最后，我希望在我的下拉菜单上执行

onChange

时，能够使用从我的菜单中选择的值作为axios.get请求的参数调用操作

我觉得我需要嵌套两个动作创建者。我已经尝试过了，但没有成功（

“fetchgadata”在我的终端中是只读的

错误）

编辑：

API调用的还原程序：

const initialState = {data:null,isFetching: false,error:null};
export const gaData = (state = initialState, action)=>{
    switch (action.type) {
        case 'FETCH_DATA_REQUEST':
        case 'FETCH_DATA_FAILURE':
        return { ...state, isFetching: action.isFetching, error: action.error };

        case 'FETCH_DATA_SUCCESS':
        return Object.assign({}, state, {data: action.data, isFetching: action.isFetching,
                 error: null });
        default:return state;

    }
};

下拉列表的减速器：

const items = [{timerange: '30daysAgo'},{timerange: '15daysAgo'},{timerange: '7daysAgo'}] 

const timeReducer = (state = { 
  timerange: items 
  }, action) => { 
    switch (action.type) {
      case 'SET_TIME_RANGE':
      console.log(state,action);
              return {
        ...state,
        timerange: action.timerange,
      };
    default:
      return state;

        }
    }

---

我看到您的axios.get请求的捕获有点输入错误，它的内容是

ype:FETCH\u DATA\u FAILURE

。否则，你能帮我加减速器吗，我在上面看不到？如果我理解正确，您需要一个操作来更新两个不同的状态，在这种情况下，您只需分派一个操作并将其添加到两个还原器中。实际上，最好只是演示：

//axios call
axios.get("some route", { some params } )
.then(response => { 
    dispatch({
      type: UPDATE_TWO_THINGS,
      payload: some_value
    })
}) .... catch, etc

//reducer 1
import { UPDATE_TWO_THINGS } from 'types';

const INITIAL_STATE = { userInfo: '' };

export default function (state = INITIAL_STATE, action) {
  switch(action.type) {
   case UPDATE_TWO_THINGS:
     return {...state, userInfo: payload };
  }

  return state;
}

//reducer 2
import { UPDATE_TWO_THINGS } from 'types';

const INITIAL_STATE = { businessInfo: '' };

export default function (state = INITIAL_STATE, action) {
  switch(action.type) {
   case UPDATE_TWO_THINGS:
     return {...state, businessInfo: payload };
  }

  return state;
}

---

希望这会有帮助，但如果没有，请告诉我，我会尽我最大的努力与您合作！谢谢你的邀请

哼。。。我不确定这是否真的是我想要的。我的意思是我想要一个动作来更新两个不同的状态。但是我想用第一个状态来更新第二个状态。在我的示例中，我需要使用时间范围来更新我的google analytics api调用。换句话说，

选择一个时间范围

->'将这个时间范围传递给我的axios。获取

。。。但是是的，我希望这两个步骤发生在onChange事件之后。更清楚了吗？嘿，西蒙，抱歉这么久才回复。你所要求的有点不受欢迎，通常意味着你需要重新思考你的行动/关系。我发现了一篇很棒的文章，简要地解释了为什么这不是一个很好的想法，但接着解释了如果你坚持的话，如何做到这一点。对你说得对。我终于解决了我的问题。但是我还是不知道我是怎么做到的。只要调整我的代码。在写一个合适的答案之前，你需要把这些都弄清楚。
const items = [{timerange: '30daysAgo'},{timerange: '15daysAgo'},{timerange: '7daysAgo'}] 

const timeReducer = (state = { 
  timerange: items 
  }, action) => { 
    switch (action.type) {
      case 'SET_TIME_RANGE':
      console.log(state,action);
              return {
        ...state,
        timerange: action.timerange,
      };
    default:
      return state;

        }
    }

//axios call
axios.get("some route", { some params } )
.then(response => { 
    dispatch({
      type: UPDATE_TWO_THINGS,
      payload: some_value
    })
}) .... catch, etc

//reducer 1
import { UPDATE_TWO_THINGS } from 'types';

const INITIAL_STATE = { userInfo: '' };

export default function (state = INITIAL_STATE, action) {
  switch(action.type) {
   case UPDATE_TWO_THINGS:
     return {...state, userInfo: payload };
  }

  return state;
}

//reducer 2
import { UPDATE_TWO_THINGS } from 'types';

const INITIAL_STATE = { businessInfo: '' };

export default function (state = INITIAL_STATE, action) {
  switch(action.type) {
   case UPDATE_TWO_THINGS:
     return {...state, businessInfo: payload };
  }

  return state;
}