如何记住从 redux useSelector 派生的变量？

Question

我怎样才能记住我的rawTranscript变量，这样它就不会触发useEffect下面的函数，从而触发昂贵的transcriptParser函数？我一直在尝试很多不同的方法，但事实上，我使用 redux-hook ( useAppSelector) 从存储中捕获数据意味着我无法使用空依赖项 useEffect 进行初始安装（钩子不能位于内部）使用效果）。出于同样的原因，我似乎也无法用useAppSelector任何一个来包装。useMemo

关于如何记住变量rawTranscript以便它不会重新触发的任何想法useEffect？

useMemo在, ,useEffect中使用 redux-hook 时出错useCallback：

React Hook“useAppSelector”无法在回调内调用。React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用。

成分

const TranscriptCardController = (): JSX.Element => {
  const dispatch = useAppDispatch();
  // how to memoize rawTranscript?
  const rawTranscript = useAppSelector(selectRawTranscript);
  const parsedTranscript = useAppSelector(selectParsedTranscript);

  useEffect(() => {
    const parsedResult = transcriptParser(rawTranscript, undefined, 0.9);
    dispatch(updateParsedTranscript(parsedResult));
  }, [dispatch, rawTranscript]);

  // ...
};

选择器

export const selectRawTranscript = createSelector(
  (state: RootState) => state.transcript.rawTranscript,
  (rawTranscript): RawTranscript => rawTranscript
);

Answer 1

selectRawTranscript如果您的函数纯粹是从存储中选择一个值（例如 ），那么这里没有问题state => state.transcript.raw。您的效果仅在值发生rawTranscript变化时才会运行——正如它应该的那样。

如果您的selectRawTranscript函数每次都返回一个新对象（例如涉及数组映射等），那么您可以在选择器本身或组件中解决这个问题。

记忆选择器

解决此问题的最佳方法是使用createSelector创建记忆选择器。例如：

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

export const selectRawTranscript = createSelector(
  (state: RootState) => state.data.someRawValue,
  (rawValue) => rawValue.map(entry => entry.data)
);

选择器的第二部分是“组合器”，只有当第一部分中选择的值发生变化时，它才会重新运行。这样你就得到了一致的对象引用。

平等比较

如果您想在组件中修复此问题，则方法是在 上包含第二个参数useAppSelector（我假设这只是 的类型化版本useSelector）。

第二个参数允许您指定自定义相等函数，以便您可以更好地控制何时将所选数据视为“更改”。使用浅层相等比较很常见，因此它实际上包含在react-redux包中。

import { shallowEqual } from 'react-redux';
import { useAppSelector } from ...

const TranscriptCardController = (): JSX.Element => {
  const rawTranscript = useAppSelector(selectRawTranscript, shallowEqual);
...

注意：我不可能知道您是否真的遇到了不需要的更改问题，rawTranscript因为您没有包含选择器功能。您可能想得太多了，这可能不是问题。