在Redux中向URL API获取添加多个参数?

时间:2019-02-19 05:04:33

标签: reactjs api redux react-redux fetch

我正在尝试使用Redux向API提取添加多个参数。我可以使一个工作(您在API调用下面看到的maxDist,但是我也想添加minStarsmaxRes参数,但是不确定如何加一个以上。我尝试向search()函数添加更多参数,但是它将仅使用一个参数。这是我到目前为止的内容:

API调用:

export default {
  search(maxDist) {
    const url = `${API_URL}&maxDistance=${maxDist}&minStars=${minStars}&maxResults=${maxRes}`;
    console.log(url);
    return fetch(url)
      .then(response => response.json())
      .then(result => {
        return result.items;
      });
  }
};

Redux Side:

const MAX_DIST_CHANGED = "MAX_DIST_CHANGED";

const initialState = {
  items: [],
  maxDist: "",
  minStars: "",
  maxRes: ""
};

export const actions = {
  maxDistChanged(maxDist) {
    return {
      type: MAX_DIST_CHANGED,
      maxDist
    };
 getItems(maxDist) {
    return {
      type: "ITEMS",
      payload: API.search(maxDist)
    };
  }
};

export function reducer(state = initialState, action) {
  switch (action.type) {
    case MAX_DIST_CHANGED: {
      return {
        ...state,
        maxDist: action.maxDist
      };
    }
 case "ITEMS_FULFILLED": {
      return {
        ...state,
        loading: false,
        items: action.payload
      };
    }
    default:
      return state;
  }
}

App.js:

  handleSubmit = e => {
    e.preventDefault();
    this.props.onGetItems(
      this.props.maxDist
    );
  };
  handleChange = event => this.props.onMaxDistChanged(event.target);

function mapDisatchToProps(dispatch) {
  return {
    onMaxDistChanged(maxDist) {
      dispatch(actions.maxDistChanged(maxDist));
    }
 onGetItems(maxDist) {
      dispatch(actions.getItems(maxDist));
    }
  };
}

如何在api调用中添加minStarsmaxRes?似乎只有一个参数有效。谢谢!

0 个答案:

没有答案