为什么我的 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，那么只有在完成更改时才会重新渲染。