CODEWITHSUNDEEP
javascriptreactjsredux
Red Baron
Red Baron

Reputation: 7652

Why is my redux selector not behaving correctly?

I'm trying to understand reselect and so far failing. I get that they are there for performance etc. should it stop mapStateToProps from being called if no state changes happen for that component?

I have this component

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

this gets called on every state change, I only want it to get called when the state changes from false to true

so I tried this

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

const mapStateToProps = () => {
    const getIsComplete = checkIfIsComplete()
    return (state, ownProps) => {
        return {
            complete: getIsComplete(state, ownProps),
        }
    }
}

however, this is breaking with this error: Can't perform a React state update on an unmounted component.

how can I fix this component so it only calls mapStateToProps when it needs too and always return the correct value?

Upvotes: 0

Views: 1117

Answers (2)

HMR
HMR

Reputation: 39270

You could create your selectors like this:

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

The component will still re render if ownProps change but provided it doesn't have ownProps then this will only re render when complete changes.

Upvotes: 0

markerikson
markerikson

Reputation: 67469

No, you're misunderstanding how mapState works. mapState will always be called any time the root state has changed.

The point of memoizing selectors here is to ensure that your mapState returns the same values if the state this component cares about hasn't changed, because connect uses shallow comparisons of the return value to decide if your component should re-render.

Please read through the React-Redux usage guide on mapState for guidance on how to use mapState correctly. My post on Using Reselect Selectors for Encapsulation and Performance discusses why and how to use Reselect.

Upvotes: 1

Related Questions