Question

我真的不知道为什么我无法让它发挥作用。所有的证据都反对它......这就是情况：

我有一个数据网格和一个搜索面板。更改搜索面板后，将更新searchparams并用于更新数据网格。

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

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

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

我认为调度调用是同步的 - 因此一个接一个。我想这是从组件到动作创建者到商店和减速器的往返行程，这是＆＃34;拧紧＆＃34;它了。第一个调用不涉及任何异步调用。

什么是＆＃34;权利＆＃34;这样做的方式？请具体说明组件，动作创建器和减速器的内容。

由于

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

现在，在发送单个操作后，您的组件应该会收到新照片。

Answer 2

我从一开始就错了。

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

原因可能是搜索框架需要可用于其他组件的情况。在那种情况下，我会用thunk去找@CodinCat上面的答案。它有效，我设法在实现之前实现它。

由于

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

2 个答案: