操作创建者处理axios获取.具有参数状态访问权限的请求

Question

我试图将一些值从一个组件传递给一个操作创建者，它正在用axios做一个get请求。我试着遵循Dan Abramov的模式:

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

然而，我不能使它工作。我认为我在两个层面上有问题:我的组件和我的动作创造者。如果能得到一些帮助就太好了。

my component:

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;

这个组件给我一个下拉菜单。当选择一个时间范围时，例如"30daysAgo"，它会更新我的redux存储状态，以便我可以从我的reducer访问该值。

下面是与我的下拉菜单相关的操作:

export function onSetTimeRange(timerange) {
 return {
        type: 'SET_TIME_RANGE',
        timerange
    }
}

，这是处理axios的动作。得到:

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" is read-only错误在我的终端)

export const SET_TIME_RANGE = 'SET_TIME_RANGE';
export function onSetTimeRange() {
  return (dispatch, getState) => {
    const {VIEW_ID} = getState().timerange;
    dispatch(fetchgadata = (VIEW_ID) => (dispatch) => {
    dispatch({
        type: 'FETCH_DATA_REQUEST',
        isFetching:true,
        error:null,
        id:VIEW_ID,
  });
  });
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({
            ype: 'FETCH_DATA_FAILURE',
            isFetching:false,
            error:err
      });
      console.error("Failure: ", err);
    });
}
  }

编辑:

API调用的reducer:

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;
        }
    }

Answer 1

我在你的axios语句中看到一个小错别字。收到请求，显示ype: FETCH_DATA_FAILURE。否则，你能把减速机加进去吗，我没看到?如果我理解正确的话，您希望一个操作更新两个不同的状态片段，在这种情况下，您只需调度一个操作并将其添加到两个reducer中。实际上，最好只是演示一下:

//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;
}

希望这有助于，但让我知道，如果没有，我会尽我最大的努力得到这个工作与你!谢谢你的关心!