Skip to content

Passing "props" to selector in makeMapStateToProps #171

@choonchernlim

Description

@choonchernlim

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions