Question

我在仪表板上工作。我有多个下拉菜单。如果用户在其中任何一个上更改了所选项目，那么我需要获取新的统计数据。

所以我要在Redux商店中存储下拉列表的当前值。 OnThange of Dropdown我已经向商店发送了新的价值。然后在App（父）组件映射状态到props并发送一个stat Fetch动作。

然而，App组件使用先前的道具调度statFetch操作，而不是新道具。我想这是因为组件稍后更新了它的道具（https://github.com/reactjs/react-redux/issues/291）。

我应该如何让我的应用程序组件接收最新的道具？或者我的案例中的预期模式是什么？

简化代码，parent：

@connect((store) => { ... }
export default class App extends PureComponent {

  handleStatRequest = () => {
    this.props.dispatch(
      statsFetch(
        this.props.viewRange,
        this.props.domain_id,
        this.props.widget_id,
        this.props.api,
        this.props.is_mobile,
        this.props.selectedCountry,
        this.props.selectedRegion,
      )
    );
  }

  render() {
    return (
      <div className="wrapper">
        <Toolbar handleStatRequest={this.handleStatRequest}/>
      </div>
    );
  }
}

和一个孩子

export default class Toolbar extends PureComponent {

    handleChange(e, data) {
      this.props.dispatch(setDomainId(data.value));
      this.props.handleStatRequest()
    }


  return (
    <div className="filter ">
      <Dropdown onChange={this.handleChange} />
    </div>
  );
}

减速器

export function stats( state={
  viewRange: "7",
  startDate: null,
  stopDate: null,
  domain_id: null,
  widget_id: null,
  isLoading: null,
  errLoading: null,
  statsData: {}
}, action) {
  switch (action.type) {
    case 'SET_VIEW_RANGE':
      return {...state, viewRange: action.viewRange};
    case 'SET_VIEW_START_DATE':
      return {...state, startDate: action.startDate};
    case 'SET_VIEW_STOP_DATE':
      return {...state, stopDate: action.stopDate};
    case 'SET_DOMAIN_ID':
      return {...state, domain_id: action.domain_id};
    case 'SET_WIDGET_ID':
      return {...state, widget_id: action.widget_id};
    case 'STAT_DATA_FETCH_LOADING':
      return {...state, isLoading: action.isLoading};
    case 'STAT_DATA_FETCH_REQUEST_URL':
      return {...state, requestUrl: action.requestUrl};
    case 'STAT_DATA_FETCH_FAILURE':
      return {...state, errLoading: action.errLoading, errStatus: action.errStatus};
    case 'STAT_DATA_FETCH_SUCCESS':
      return {...state, statsData: action.statsData};
    default:
      return state
  }
}

获取数据的操作

export function statsFetch(viewRange=7, domain_id=null, widget_id=null, api=null, is_mobile=null, code=null, region=null) {
  let domain = ENV === "development" ? "https://example.com" : "";
  let url = "/some/path/";
  let startStopDateRange = "?start=" + getDate(viewRange) + "&stop=" + getDate();
  let domainsAndWidgets = "&domains=" + domain_id + "&widgets=" + widget_id;
  let apiParam = api === "null"? "" : "&api=" + api ;
  let is_mobileParam = is_mobile === "null" ? "" : "&is_mobile=" + is_mobile ;
  let devices = apiParam + is_mobileParam;
  let countriesParam = code === "null" ? "" : "&country=" + code;
  let regionParam = region === "null" ? "" : "&region=" + region;

  let urlWithPrams = domain + url + startStopDateRange + domainsAndWidgets + devices + countriesParam + regionParam;

  return (dispatch) => {
    dispatch(statsFetchLoading(true));
    axios.get(urlWithPrams, {withCredentials:true})
      .then(response => { console.log('response',response); dispatch(statsFetchSuccess(response.data))})
      .then(response => { dispatch(statsFetchLoading(false)); })
      .catch( error => {
        dispatch(statsFetchFailure(true, error.response.status));
        dispatch(statsFetchLoading(false));
        console.log(error)
      })
  };
}

Answer 1

您使用旧道具调度操作的原因是，当您的下拉列表调度其操作以更新商店时，您的App组件不会更新。因此，要么您没有将相应的状态传递给mapStateToProps中的App组件，要么您不以不可变的方式更新reducer中的状态，例如返回一个新的状态对象。发布reducer代码可能会有所帮助。

组件使用旧道具调度操作

1 个答案: