Action creators 处理 axios get.request 状态访问参数

Question

我正在尝试将一些值从组件传递给正在使用 axios 执行获取请求的动作创建者。我正在尝试遵循 Dan Abramov 的这种模式：

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;

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

这是与我的下拉菜单关联的操作：

export function onSetTimeRange(timerange) {
 return {
        type: 'SET_TIME_RANGE',
        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" 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 调用的减速器：

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.get 请求的 catch 中看到一个小错字，它显示为 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;
}

希望这对您有所帮助，但如果没有帮助请告诉我，我会尽我所能与您合作！感谢提问！

Action creators 处理 axios get.request 状态访问参数

Action creators handling axios get.request with state access for param

asynchronous

reactjs

react-redux

redux-thunk