当前位置 : 主页 > 网页制作 > React >

reactjs – 访问mapStateToProps中的state属性

来源:互联网 收集:自由互联 发布时间:2021-06-15
我需要在容器中访问redux状态的特定属性.这些属性又将用作获取其他嵌套属性并将其映射到组件道具的键.我使用immutableJS. 在mapStateToProps中执行此操作的最佳方法是什么?这会导致任何
我需要在容器中访问redux状态的特定属性.这些属性又将用作获取其他嵌套属性并将其映射到组件道具的键.我使用immutableJS.

在mapStateToProps中执行此操作的最佳方法是什么?这会导致任何性能开销还是没关系,因为mapStateToProps已经将整个状态作为参数接收了?

这是一个例子.

州选择者:

export const userSettingsState = state => state.get('userSettings');
export const transactionsState= state => state.get('transactions');

userSettings是一个不可变的Map,而transaction也是一个userID和事务列表对的Map.

const mapStateToProps = (state) => {
  const curUID = userSettingsState(state).get('currentUserID');
  return {
    trList: transactionsState(state).getIn([curUID, 'trList'])
  };
};

我需要currentUID来访问用户事务.上面的示例工作正常.但这是最好的方式吗?

好问题.是的,这是处理计算出道具和生成派生数据的首选方法.这不仅是最好的方式,而且性能也非常好. Cory House(一个非常好的React dev在社区中很熟知)在Twitter上发布了类似于这个 a few days ago的内容,他的相同方法适用于mapStateToProps().您唯一的另一种选择是将计算方法添加到componentWillReceiveProps()和componentDidMount().正如你想象的那样,这很快就会变得凌乱.

现在,对你这样做的方式有所保留.

不要在这里放异步电话!这也会导致渲染组件时出现问题,因为mapStateToProps()在组件安装之前运行.如果您的组件在安装之前等待承诺,那么您将获得性能命中.这可能是显而易见的.

说到性能,我亲自为这样的下拉框生成派生数据,其中有8,600个条目在用户输入上,对这些8,600个条目应用模糊过滤器,重新呈现下拉列表,并显示新的过滤列表.没有性能问题,而且组件也很平滑.

网友评论