Typescript 防止重复使用 Select 器重新渲染

发布于01月13日

我有一个组件，它使用Reaction-Redux的useSelector钩子来检索Reduxstore 中的词典.字典是UUID到包含我正在呈现的数据的对象的映射.

interface IComponentProps {
  id: string
}

const Component: React.FC<IComponentProps> = (props) => {
  const dataMap = useSelector((store: IRootState) => store.data.value)

  return (
    <div>
      <h1>{dataMap[props.id].title}</h1>
      <p>{dataMap[props.id].description}</p>
    </div>
  )
}

我有一个分派方法，它向redux存储中的数据字典添加一个新的键-值对.

假设我有这<Component />个的倍数，以及另一个<ComponentTwo />，它调度方法来添加一个新的键值对.当分派方法发生时，我所有的<Component />个都将重新呈现，尽管我不希望它们的透视标题和描述保持不变.有什么方法可以让我禁用重现功能吗？

推荐答案

您可以使用Redux-Toolkit(reselect)中的createSelector创建一个备忘 Select 器，该 Select 器使用idprops 作为其 Select 和结果备忘过程的一部分.

见How do I create a selector that takes an argument?

例如:

import { createSelector } from '@reduxjs/toolkit';
// or if not using Redux-Toolkit
// import { createSelector } from 'reselect';

export const selectDataById = createSelector(
  [
    (state: IRootState) => state.data.value,
    (state: IRootState, id: string) => id
  ],
  (dataMap, id) => dataMap[id],
);

只有当两个输入 Select 器中的任何一个的值发生变化时，selectDataById Select 器函数才会重新计算其输出值.如果计算的输出值不变，则不应触发消费组件重新呈现.

import { selectDataById } from '../path/to/selectDataById';

interface IComponentProps {
  id: string
}

const Component = ({ id }: IComponentProps) => {
  const data = useSelector((state: IRootState) => selectDataById(state, id));

  // check/handle undefined data reference?

  return (
    <div>
      <h1>{data?.title}</h1>
      <p>{data?.description}</p>
    </div>
  );
};