来自组件 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 调用，所以网格没有相应更新。

我认为调度调用是同步的——因此一个接一个。我猜这是从组件到 action creator，再到 store 和 reducer 的往返过程 "screwing"。第一次调用不涉及任何异步调用。

"right" 这样做的方法是什么？请具体说明组件、action creator 和 reducer 中的内容。

谢谢

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

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

Answer 2

我一开始就错了

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

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

谢谢

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

Multiple dispatch calls from component react/redux

reactjs

redux

redux-thunk