带有动态(基于uid)路径的React-Redux mapStateToProps

基础概念

mapStateToProps 是 Redux 中的一个函数，用于将 Redux store 中的状态映射到 React 组件的 props。当 Redux store 中的状态发生变化时，mapStateToProps 会重新计算并更新组件的 props。

动态路径的概念

动态路径通常指的是根据某些条件或参数动态生成的 URL 路径。在 React-Redux 中，动态路径可以通过在 mapStateToProps 中使用参数（如 uid）来实现。

类型

简单映射：直接从 store 中选择状态。
动态映射：根据传入的参数（如 uid）动态选择状态。

应用场景

用户个人页面：根据用户的 uid 显示不同的个人信息。
产品详情页：根据产品的 id 显示不同的产品详情。

示例代码

假设我们有一个 Redux store，其中包含用户信息，我们希望根据 uid 动态获取用户信息并显示在组件中。

Redux Store 结构

{
  users: {
    byId: {
      uid1: { name: 'Alice', age: 25 },
      uid2: { name: 'Bob', age: 30 }
    }
  }
}

mapStateToProps 示例

import { connect } from 'react-redux';

const UserDetail = ({ user }) => {
  return (
    <div>
      <h1>{user.name}</h1>
      <p>Age: {user.age}</p>
    </div>
  );
};

const mapStateToProps = (state, ownProps) => {
  const { uid } = ownProps.match.params; // 假设 uid 是从 URL 参数中获取的
  return {
    user: state.users.byId[uid]
  };
};

export default connect(mapStateToProps)(UserDetail);

可能遇到的问题及解决方法

问题1：找不到对应的 `uid`

原因：uid 可能不存在于 state.users.byId 中。

解决方法：

const mapStateToProps = (state, ownProps) => {
  const { uid } = ownProps.match.params;
  const user = state.users.byId[uid] || {}; // 提供默认值
  return {
    user
  };
};

问题2：组件频繁重新渲染

原因：每次 Redux store 更新时，mapStateToProps 都会被调用，即使 uid 没有变化。

解决方法：

使用 reselect 库创建记忆化的选择器：

import { createSelector } from 'reselect';

const getUserById = createSelector(
  (state, uid) => state.users.byId,
  (state, uid) => uid,
  (usersById, uid) => usersById[uid] || {}
);

const mapStateToProps = (state, ownProps) => {
  const { uid } = ownProps.match.params;
  return {
    user: getUserById(state, uid)
  };
};

通过这种方式，只有当 uid 或 state.users.byId 发生变化时，选择器才会重新计算，从而减少不必要的渲染。