javascript - Redux mapDispatchToProps 未获得正确的有效负载

Question

所以我的应用程序中有这个简化的结构:

在组件中我有:

   handlePageClick(data) {
        this.props.onChangePage(data.selected + 1);
        this.props.onSearchSomething(this.props.PM);
    }

在我的容器中:

const mapDispatchToProps = dispatch => ({
    onUpdateForm: (propPath, val) => {
        dispatch(updatePMForm(propPath, val));
    },
    onSearchSomething: (payload) => {
        // TODO: process the PM state here when integrating with the server in order to extract
        // the proper payload out of the state object
        dispatch(searchSomething(15, payload));
    },
    onChangePage: (pageNumber) => {
        dispatch(changePage(pageNumber));
    },
});

因此，当我触发 pageClick，并且 onChangePage 返回 newState 时，在 mapDispatchToPropsdispatch(searchSomething(15, Payload)) 中接收有效负载中的先前状态，该状态尚未更新。

Answer 1

您应该使用 componentDidUpdate 或 componentWillUpdate 并将先前状态与当前状态进行比较，然后使用更新后的值调用 this.props.onSearchSomething存储而不是在 handlePageClick 中依次调用它。这是为什么？组件中的状态更改可能是异步的，并且几乎在所有情况下，组件的 props 都无法在 this.props.onChangePage 和 this.props.onSearchSomething 调用之间更新。请阅读this issue为了更好地理解我在说什么。

但是为了帮助您，前段时间我创建了一个小实用程序 map-props-changes-to-callbacks将组件中的回调分配给 redux 存储中的特定更改。也许这对您的情况有帮助，您可以这样编写代码:

handlePageClick(data) {
  this.props.onChangePage(data.selected + 1)
}

onPageChanged() {
  this.props.onSearchSomething(this.props.PM)
}

此外，您应该考虑将逻辑转移到单个操作，这样您就可以只分派(dispatch)一个操作并获取搜索结果作为返回。