带条件语句的Redux useSelector

基础概念

useSelector 是 Redux Toolkit 中的一个 Hook，用于在 React 组件中从 Redux store 中选择数据。它允许你将 Redux store 中的状态映射到组件的 props 上。带条件语句的 useSelector 指的是在选择数据时使用条件语句来过滤或处理数据。

类型

useSelector 的参数是一个选择器函数（selector function），这个函数接收 Redux store 的整个状态作为参数，并返回需要选择的数据。选择器函数可以包含条件语句来处理数据。

应用场景

当你需要在组件中使用 Redux store 中的数据，并且这些数据需要根据某些条件进行过滤或处理时，可以使用带条件语句的 useSelector。

示例代码

假设我们有一个 Redux store，其中包含一个 users 数组，每个用户对象包含 id、name 和 age 字段。我们希望在组件中只显示年龄大于 18 岁的用户。

import React from 'react';
import { useSelector } from 'react-redux';

const UserList = () => {
  const users = useSelector(state => {
    return state.users.filter(user => user.age > 18);
  });

  return (
    <div>
      <h1>Users Over 18</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} - {user.age}</li>
        ))}
      </ul>
    </div>
  );
};

export default UserList;

遇到的问题及解决方法

问题：为什么 `useSelector` 会导致组件重新渲染？

原因：useSelector 会在 Redux store 发生变化时重新执行选择器函数。如果选择器函数返回的结果与上一次不同，React 会认为组件的 props 发生了变化，从而触发重新渲染。

解决方法：

使用 shallowEqual 进行浅比较：可以使用 react-redux 提供的 shallowEqual 函数来进行浅比较，避免不必要的重新渲染。

import { useSelector, shallowEqual } from 'react-redux';

const UserList = () => {
  const users = useSelector(state => {
    return state.users.filter(user => user.age > 18);
  }, shallowEqual);

  // 组件代码
};

优化选择器函数：确保选择器函数只返回必要的数据，并且尽量减少选择器函数的复杂度。

const getUsersOver18 = state => {
  return state.users.filter(user => user.age > 18);
};

const UserList = () => {
  const users = useSelector(getUsersOver18, shallowEqual);

  // 组件代码
};