来自组件 react/redux 的多个调度调用答案

【问题标题】：Multiple dispatch calls from component react/redux来自组件 react/redux 的多个调度调用
【发布时间】：2017-08-15 17:22:53
【问题描述】：

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

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

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

  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 调用，因此网格没有相应更新。

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

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

谢谢

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

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

你可以在componentWillReceiveProps(nextProps)中写this.props.dispatch(getPhotos(...))，这样你就可以访问新的道具（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
      }))
    })
}

所以现在在调度单个操作之后，您的组件应该会收到新照片。

【讨论】：

【解决方案2】：

我一开始就错了。

搜索参数不应进入商店。我可以单独处理组件中的 - 在组件的状态下。这简化并消除了我上面描述的问题。

当然，可能存在搜索参数需要可用于其他组件的情况。在那种情况下，我会用 thunk 去上面的@CodinCat 回答。它有效，我设法在实现之前实现了它。

谢谢

【讨论】：