How to pass an additional argument to useSelector

在使用 Redux 的 useSelector 钩子时，如果需要传递额外的参数，可以通过将参数包装在useSelector的选择函数中来实现。useSelector 钩子允许你从 Redux store中提取数据，但它并没有直接提供传递额外参数的机制。你需要在选择函数里面自己处理这些参数。

这里有一个例子说明如何实现：

假设我们的 Redux store中有一列表的用户数据，我们想要根据一个传入的用户ID来选择特定的用户信息。我们可以创建一个选择函数，这个函数接受整个state和我们需要的用户ID作为参数。

javascript
// 这是选择函数，它接受 Redux state 和 userId 作为参数
const selectUserById = (state, userId) => state.users.find(user => user.id === userId);

// 在组件中使用 useSelector
import React from 'react';
import { useSelector } from 'react-redux';

const UserProfile = ({ userId }) => {
  // 使用 useCallback 来记忆化选择函数并传入 userId 参数
  const user = useSelector(state => selectUserById(state, userId));

  return (
    <div>
      <h1>User Profile</h1>
      {user ? (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <p>User not found.</p>
      )}
    </div>
  );
};

export default UserProfile;

在这个例子中，我们定义了selectUserById函数，它接受state和userId为参数，然后根据userId在用户列表中查找相应的用户。在UserProfile组件中，我们通过传递一个箭头函数给useSelector，在这个箭头函数中调用selectUserById并传入当前的state和组件的userId属性。

这种方式有效地将参数传递给了选择器，使得我们可以根据组件的属性动态地从Redux store中提取数据。这样的模式在处理列表或是条件选择数据时非常有用。