为什么我的 redux 选择器行为不正确？

Question

我试图了解重新选择，但到目前为止失败了。我知道他们在那里是为了性能等。如果该组件没有发生状态更改，它是否应该停止调用 mapStateToProps？

我有这个组件

const mapStateToProps = ({ data: { complete } }) => ({

    isComplete: complete,

})

这会在每次状态更改时调用，我只希望在状态从 false 更改为 true 时调用它

所以我尝试了这个

const checkIfIsComplete = () => createSelector((state, props) => props.data.complete)

const mapStateToProps = () => {

    const getIsComplete = checkIfIsComplete()

    return (state, ownProps) => {

        return {

            complete: getIsComplete(state, ownProps),

        }

    }

}

但是，这与此错误有关：Can't perform a React state update on an unmounted component.

如何修复此组件，使其仅在需要时调用 mapStateToProps 并始终返回正确的值？

Answer 1

不，你误解了它的mapState工作原理。 mapState将始终在根状态发生更改时调用。这里记忆选择器的目的是确保在mapState组件关心的状态没有改变的情况下返回相同的值，因为connect使用返回值的浅比较来决定组件是否应该重新渲染。请通读React-Redux 使用指南，mapState了解如何mapState正确使用。我在Using Reselect Selectors for Encapsulation and Performance上的帖子讨论了为什么以及如何使用 Reselect。

Answer 2

你可以像这样创建你的选择器：const selectData = state => state.data;const selectIsComplete = createSelector(  selectData,  (data) => data.complete)const mapStateToProps = createSelector(  selectIsComplete,  //only create a new object with complete property  //  if complete changes  complete=>({complete}))如果 ownProps 更改，组件仍将重新渲染，但如果它没有 ownProps，那么只有在完成更改时才会重新渲染。