Skip to content

Passing "props" to selector in makeMapStateToProps #171

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
choonchernlim opened this issue Sep 15, 2016 · 2 comments
Closed

Passing "props" to selector in makeMapStateToProps #171

choonchernlim opened this issue Sep 15, 2016 · 2 comments
Labels

Comments

@choonchernlim
Copy link

I have 3 instances of same component (very similar to the VisibleTodoList example) where this component has a selector that relies on the given "prop" value to get the state. The only difference is each instance resides under different parent components.

Based on the VisibleTodoList example, I created makeMapStateToProps that looks like this:-

const makeMapStateToProps = () => {
  const sortableListSelector = makeSortableListSelector();

  return (state, ownProps) => ({
    list: sortableListSelector(state, ownProps)
  });
};

const MyListContainer = connect(makeMapStateToProps, { onSortRequested: sortRequested })(MyList);
export default MyListContainer;

While it works, all 3 instances' render() get triggered even though only one instance should get rerendered on state change.

After poking around, I found out that makeMapStateToProps() also provides "prop". So, out of curiosity, I made the following tweak to the above code:-

const makeMapStateToProps = (initialState, initialProps) => {
  const sortableListSelector = makeSortableListSelector();

  return state => ({
    list: sortableListSelector(state, initialProps)
  });
};

Now, it functions exactly what I expected and only one instance gets rerendered instead of all 3.

When I printed out initialProps and ownProps and perform === check...

const makeMapStateToProps = (initialState, initialProps) => {
  const sortableListSelector = makeSortableListSelector();

  return (state, ownProps) => {
    console.log(initialProps, ownProps, initialProps === ownProps);

    return ({
      list: sortableListSelector(state, initialProps)
    });
  };
};

... initialProps has same value as ownProps, but fails on === check.

My question is... why, in my scenario, do I have to use the "prop" provided from makeMapStateToProps() instead of using the approach from VisibleTodoList example to prevent all instances of same component from rerendering?

I'm using the following versions:-

"react": "15.3.1"
"react-redux": "4.4.5"
"reselect": "2.5.3"

Thank you.

@choonchernlim
Copy link
Author

Is the symptom I'm seeing due to this: reduxjs/react-redux#348 ? Thank you.

@ellbee
Copy link
Collaborator

ellbee commented Mar 1, 2017

I'm going to close this due to inactivity.

@ellbee ellbee closed this as completed Mar 1, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants