reactjs - 来自组件 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 创建者、到存储和 reducer 的往返过程，这将其“搞砸”了。第一次调用不涉及任何异步调用。

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

谢谢

Answer 1

dispatch是同步的(除非您使用像 redux-thunk 这样的中间件)。但之后this.props.dispatch(updateSearchParams(change))
，您的组件需要更新(重新渲染)或 this.props.searchParams还是老的。

您可以写this.props.dispatch(getPhotos(...))在componentWillReceiveProps(nextProps) ，这样您就可以访问新的 props ( nextProps )

<小时/>

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

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

现在，在分派(dispatch)单个操作后，您的组件应该会收到新照片。