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

我正在尝试使用

Redux

向API获取添加多个参数。我可以让一个参数正常工作（

maxDist

您可以在下面的API调用中看到），但我也想添加

minStars

和

maxRes

参数，但我不确定如何添加多个参数。我尝试向

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

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

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

Redux端：

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

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

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

App.js:

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

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

  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调用中添加

minStars

和

maxRes

？似乎只有一个参数有效。谢谢大家!