来自组件 react/redux 的多次调度调用

Question

我真的不知道为什么我不能让它工作。所有的证据都反对它......情况是这样的：

我有一个数据网格和一个搜索面板。当搜索面板更改时，搜索参数会更新并用于更新数据网格。

触发链的事情是当用户更改搜索面板时。在我的组件中，我通过以下方式处理搜索面板更改：

  getPhotos(key, value) {
    const change = [{ key: key, value: value},{ key: 'page', value: 1}]
    this.props.dispatch(updateSearchParams(change))

    console.log('payload.searchParams', this.props.searchParams);

    this.props.dispatch(
      getPhotos(
        { context:this.props.params.context,
          searchParams: this.props.searchParams }
      )
    );
  }

因此，对动作创建者的两个调度调用形成了组件。问题是 searchparams 没有及时更新 getPhotos 调用，因此网格没有相应更新。

我认为调度调用是同步的——因此一个接一个。我想这是从组件到动作创建者，再到存储和减速器的往返行程，它“搞砸”了它。第一次调用不涉及任何异步调用。

这样做的“正确”方法是什么？请具体说明组件、动作创建者和减速器中的内容。

谢谢

Answer 1

dispatch是同步的（除非你使用一些中间件，比如 redux-thunk）。但是之后this.props.dispatch(updateSearchParams(change)) ，您的组件需要更新（重新渲染）或this.props.searchParams仍然是旧的。

你可以写this.props.dispatch(getPhotos(...))进去componentWillReceiveProps(nextProps)，这样你就可以访问新的道具 ( nextProps)

如果您使用 redux-thunk 和两个动作updateSearchParams并且getPhotos总是绑定在一起，您可以为它们创建另一个聚合动作创建器。

const updateSearchParams = change => dispatch => {
  // return a promise here
  // or use callback style etc. whatever you prefered
}

const updateSearchParamsAndGetPhotos = (change, context) => dispatch => {
  dispatch(updateSearchParams(change))
    .then(res => {
      dispatch(getPhotos({
        context,
        searchParams: res.data.searchParams
      }))
    })
}

所以现在在分派单个动作后，您的组件应该会收到新照片。