反应/Redux mapStateToProps by ownProps

Posted 2023-02-16

【中文标题】反应/Redux mapStateToProps by ownProps

【英文标题】：React/Redux mapStateToProps by ownProps

【发布时间】：2020-07-23 11:56:23

【问题描述】：

我正在尝试在 react 中添加一个组件，该组件将根据其属性从 websockets（已经工作）获取更新：

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

应该只对带有 room 属性的组件进行更新，该属性使用 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);

组件定义：

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

现在，我获得的每次更新（可能异步发生）一个组件是空白的，而另一个组件由合适的温度填充，因此它在频繁更新时开始闪烁。

您知道如何以正确且有效的方式通过属性进行更新吗？

【参考方案1】：

您应该在温度组件上使用 shouldComponentUpdate 来决定是否要渲染它。只有当返回值为 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);

【参考方案2】：

您的mapState 函数应该始终返回此组件所需的数据，无论已调度什么操作或如何更新存储。然后 React-Redux 会检查这个组件的数据自上次以来是否真的发生了变化，并且只有在数据发生变化时才重新渲染它。

现在，您的mapState 函数仅部分返回数据。您应该重写它，以便Temperature 的每个实例总是从存储中提取它需要的任何数据。

（附带说明：don't name state slices as "state.somethingReducer". Name them after the data that's contained inside。）