redux 中的 createSelector 用法

redux 的 createSelector 用法

createSelector 是 Redux Toolkit 中的一个函数，它来源于 Reselect 库，并被 Redux Toolkit 重新导出以方便使用。这个函数的主要作用是创建可记忆（memoized）的选择器，允许我们从 Redux store 中选择部分状态数据，并将其作为参数传递给一个转换函数，以避免在相同的输入下重复计算。以下是 createSelector 的详细用法：

基本用法

createSelector 接受一个或多个输入选择器函数（input-selectors）和一个转换函数（transform function）作为参数。

const resultSelector = createSelector(
  inputSelector1,    // 第一个输入选择器函数
  inputSelector2,    // 第二个输入选择器函数（可选，根据需要添加）
  ...inputSelectors, // 更多输入选择器函数（可选）
  (resultOfInputSelector1, resultOfInputSelector2, ...results) => {
    // 转换函数，接收所有输入选择器函数的返回值作为参数
    // 并返回一个新的结果
  }
);

参数说明

输入选择器函数（input-selectors）：这些函数接收整个 Redux state 作为参数，并返回 state 中的一个片段。它们可以是任何能够选择状态片段的函数。
转换函数：这是一个普通的 JavaScript 函数，它接收所有输入选择器函数的返回值作为参数，并返回一个新的值。这个新值通常是对输入数据的某种转换或计算的结果。

特点

可记忆性：createSelector 创建的选择器是可记忆的，意味着如果输入选择器函数的返回值没有变化，那么转换函数将不会重新执行，而是直接返回上次计算的结果。这有助于避免不必要的计算和渲染，提高应用性能。
灵活性：createSelector 支持嵌套选择器和参数选择器，使得选择和组合 Redux store 中的状态更加灵活。

示例

假设我们有一个 Redux store，它包含用户信息和商品列表。我们可以使用 createSelector 来创建一个选择器，该选择器返回用户的姓名和购买的商品数量。

import { createSelector } from '@reduxjs/toolkit';

// 假设这是从 Redux store 中选择用户姓名的选择器
const selectUserName = state => state.user.name;

// 假设这是从 Redux store 中选择商品列表的选择器
const selectProducts = state => state.products;

// 使用 createSelector 创建一个新的选择器
const selectUserNameAndProductCount = createSelector(
  selectUserName,
  selectProducts,
  (userName, products) => ({
    userName,
    productCount: products.length,
  })
);

// 在 React 组件中使用这个选择器
import { useSelector } from 'react-redux';

function MyComponent() {
  const { userName, productCount } = useSelector(selectUserNameAndProductCount);
  // ... 使用 userName 和 productCount 渲染组件
}

在这个示例中，selectUserNameAndProductCount 是一个选择器，它结合了 selectUserName 和 selectProducts 两个输入选择器，并通过转换函数生成了一个新的对象，该对象包含了用户的姓名和购买的商品数量。由于 createSelector 的可记忆性，这个选择器将只在 state.user.name 或 state.products 发生变化时重新计算。