Question

我有react-redux应用程序，该应用程序从节点服务器获取数据，每次需要获取某些内容时，我都必须创建相同的操作来更改获取的值，这是一个问题：我如何传递变量才能避免在这种情况下重复代码？

export function fetchProducts() {
return dispatch => {
  dispatch(fetchProductsBegin());
  return fetch("/api/followers")
    .then(handleErrors)
    .then(res => res.json().then(console.log(res)))
    .then(json => {
      dispatch(fetchProductsSuccess(json));
      return json;
    })
    .catch(error => dispatch(fetchProductsError(error)));
};
  }

然后我将其称为fetchProduct：

class ProductList extends React.Component {  
  componentDidMount() {
    this.props.dispatch(fetchProducts());
  }

我希望得到的结果是，我调用fetchProducts并放置一个变量，然后每次都使用相同的操作。

Answer 1

您可以使用以下内容：

// in component: 
this.props.dispatch(fetchProducts(id));
// in function
export function fetchProducts(id) {

此外，您可以使用

class ProductList extends React.Component {  
  componentDidMount() {
   this.props. fetch(id);
}
const mapDispatchToProps = (dispatch) => ({
  fetch: (id) => dispatch(fetchProducts(id))
});
export default connect(null, mapDispatchToProps)(ProductList)

Answer 2

关于代码结构，应使用Axios库来调用API，使用保证等待API调用，而不是调度fetchProductsBegin。
in this case, you can rewrite the code as below:

export function fetchProducts(id) {
return dispatch => {
  dispatch(fetchProductsBegin(id));
  return fetch(`/api/followers/${id}`)
  //...
}

通话功能

  componentDidMount() {
    this.props.dispatch(fetchProducts(id));
  }

在React组件中调度获取函数时如何传递变量？

2 个答案: