反应/Redux mapStateToProps by ownProps

Question

I'm trying to add a component in react which will get updates from websockets (already working) according its property:

<div><Temperature room='livingroom'/></div>
<div><Temperature room='cellar'/></div>

The update should only be done for the component with the room property, which is mapped with mapStateToProps:

  function mapStateToProps(state, ownProps){
     if (ownProps.room == state.dataReducer.room_name){
        return { temp: state.dataReducer.temp,
                 room_name: state.dataReducer.room_name}
               }
  }

export default connect(mapStateToProps)(TOB);

The component definition:

    const Temperature = ({room_name, temp}) => (
       <ul> {temp} </ul>
    );

Now every update I get (can happen async) one component is blank while the other is filled by the right temperature so it starts to flicker on frequent updates.

Do you have any idea how to do this updating by properties the right and working way?

Answer 1

Your mapState function should always return the data this component needs, regardless of what action has been dispatched or how the store has been updated. React-Redux will then check to see if the data for this component has actually changed since last time, and only re-render it if the data has changed.

Right now, your mapState function is only returning data some of the time. You should rewrite it so that every instance of Temperature is always extracting whatever data it needs from the store.

(As a side note: don't name state slices as "state.somethingReducer" . Name them after the data that's contained inside .)

Answer 2

You should use shouldComponentUpdate on your Temperature component to decide if you want it to render or not. The component will render only if the return value evaluate to true

shouldComponentUpdate(nextProps) {
  return nextProps.room === nextProps.room_name;
}

function mapStateToProps(state){
  return 
    { temp: state.dataReducer.temp,
      room_name: state.dataReducer.room_name
  }
}

export default connect(mapStateToProps)(TOB);