第59节——redux-toolkit中的createSelector

一、概念

在 Redux Toolkit 中，createSelector 是一个函数，它允许我们从 Redux store 中选择部分状态数据，并将其作为参数传递给一个 memoized 函数，以避免在相同的输入下重复计算。此外，Redux Toolkit 中的 createSelector 还支持嵌套选择器和参数选择器，使得选择和组合 Redux store 中的状态更加灵活

二、参数说明

import { createSelector } from '@reduxjs/toolkit'

export const nameAndAge = createSelector(
  /**
   * 第一部分参数是一个或者多个输入选择器函数
   * 用户选择redux store中的一部分状态，并将其
   * 作为计算函数的参数
   * 这些输入选择器函数可以是任何具有选择状态的功能
   */
  // 所有的state,导出user模块给以下一位选手
  (state) => state.user,
  (user) => {
    /**
     * 只有当前模块的数据
     * 发生改变的时候
     * 才会触发这一系列的方法
     */
    console.log("触发了吗")
    return {
      name: user.name,
      age: user.age
    }
  }
)

三、简单例子

1、在slice目录下创建student

import { createSlice } from '@reduxjs/toolkit'


const studentSlice = createSlice({
  name: "student",
  initialState: {
    num: 1
  },
  reducers: {
    numAdd (state) {
      state.num += 1
    }
  }
})

export default studentSlice.reducer

export const { numAdd } = studentSlice.actions

2、创建selectors目录，在里面添加user.js文件

import { createSelector } from '@reduxjs/toolkit'

export const nameAndAge = createSelector(
  /**
   * 第一部分参数是一个或者多个输入选择器函数
   * 用户选择redux store中的一部分状态，并将其
   * 作为计算函数的参数
   * 这些输入选择器函数可以是任何具有选择状态的功能
   */
  // 所有的state,导出user模块给以下一位选手
  (state) => state.user,
  (user) => {
    /**
     * 只有当前模块的数据
     * 发生改变的时候
     * 才会触发这一系列的方法
     */
    console.log("触发了吗")
    return {
      name: user.name,
      age: user.age
    }
  }
)

3、页面中使用

import { nameAndAge } from "./store/selectors/user";
import { numAdd } from "./store/slices/student";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";

export default function LearnReduxToolkit5() {
  /**
   * 如果要使用selector里面的数据
   * 那么必须要通过useSelector
   * 然后把对应的方法传入就可以拿到
   * 返回值
   */
  const user = useSelector(nameAndAge);

  const dispatch = useDispatch();
  useEffect(() => {
    console.log("触发了吗")
  }, [user])

  const student = useSelector((state) => state.student);

  console.log(student);
  return (
    <div>
      <div>{student.num}</div>
      <button onClick={() => dispatch(numAdd())}>+1</button>
    </div>
  );
}

四、使用场景

createSelector函数主要用于优化React应用程序中的性能，特别是在具有大量数据的情况下。它的主要用途是创建输出选择器函数，该函数将redux store中的多个状态组合并到单个值中，并将该值缓存以提高性能

1、过滤和排序数据

通过createSelector函数，可以根据多个条件从Redux store中选择数据，并使用JavaScript函数对其进行过滤、排序等处理。

2、转换数据格式

通过createSelector函数，可以将Redux store中的原始数据转换为更易于处理的格式，如图表数据，饼状图数据等。

3、避免不必要的渲染

使用createSelector函数可以避免不必要的渲染。当createSelector函数的输入参数未更改时，将从缓存中返回结果。只有当输入参数更改时，createSelector函数才会重新计算其输出，并在React组件中触发渲染。

4、避免重复计算

在Redux store中包含大量数据时，使用createSelector函数可以避免不必要的计算。例如，可以通过创建一个选择器函数，该函数选择一个对象数组并返回其长度来避免在每次计算数组长度时进行重复的大量计算