将反应组分结合到还原态的一部分

Question

I have redux store that looks something like this:

{
  user: {},
  alerts: [],
  reports: [],
  sourses: []
}

For each one of this parts of state i have a bunch of React Components wrapped in a container wich connected via react-redux . And has mapStateToProps like this

(state) => {alerts: state.alerts}
(state, ownProps) => {alert: _.filter(state, {id: ownProps.curId})}

Problem that when i for example launch some action for Alerts like CREATE_ALERT or EDIT_ALERT and redux state updated, ALL REACT COMPONENTS WILL RESPOND TO THIS CHANGE even ones that works with different parts like sources or reports .

My question: how to "bind" certain components to certain parts of a tree. So each container component WILL UPDATE ONLY WHEN APROPRIATE PART OF REDUX STATE UPDATED and ignore other changes.

Expected behavior

Dispatch CREATE_ALERT -> Alert reducer -> Redux store update -> ONLY Alert container component re-rendering.

Answer 1

When you are changing state in redux the whole state becomes just a new object. Then your component is given by this new object (new reference) and re-renderes itself.

To fix this behaviour you need to add some logic to compare if your component got props with different value (not reference).

The easiest and fastest way is to use React.PureComponent . You can also override shouldComponentUpdate function and handle changes by yourself. But note that PureComponent works only with primitives (it does a shallow compare).

Check also Immutable.js which helps you with intelligent way of changing references of props.

Answer 2

if you use connect method, then pass only selected redux state to the component, this will prevent rendering of other components

example:

User Component:

 const mapStateToProps = state =>({
  users: state.users
  });

export default connect(mapStateToProps)(User)

Alert Component:

const mapStateToProps = state =>({
  alerts: state.alerts
  });

export default connect(mapStateToProps)(Alert)

Answer 3

Check this out: Avoid Reconciliation

There explains what Neciu says.

Answer 4

Container components created with connect will always receive notifications of all updates to the store.

The responsibility for consuming these updates falls on the receiving connect component. It should contain the logic to extract the data relevant to it.