Redux createSelector 似乎没有记住结果

Question

我一直在阅读 createSelector 上的 docs，我的印象是它应该记住结果以避免昂贵的计算。但是，出于某种原因，我的 console.logs 在 不应该 触发的函数中触发。很好奇为什么会这样，我做错了什么吗？当我到达这个特定组件时，数据已经以相同的形状存在于商店中，因此应该对其进行记忆。

注意：useAppDispatch 和 useAppSelector 与默认值相同，它们只是在中心位置输入 ts。

在我的组件中：

  const dispatch = useAppDispatch();
  const rawTranscript = useAppSelector(selectRawTranscript);
  const parsedTranscript = useAppSelector(selectParsedTranscript);

  const parsedResult = useMemo(() => {
    // rawTranscript should be memoized ... 
    return transcriptParser(rawTranscript, undefined, 0.9);
  }, [rawTranscript]);

  useEffect(() => {
    // this also fires, I initially had the parsed result here but the same behavior happened.
    // const parsedResult = transcriptParser(rawTranscript, undefined, 0.9);
    dispatch(updateParsedTranscript(parsedResult));
  }, [dispatch, parsedResult]);

在我的 redux 切片中：

// selectRawTranscript should be memoized (createSelector is used)
export const selectRawTranscript = createSelector(
  (state: RootState) => state.transcript.rawTranscript,
  rawTranscript => rawTranscript
);

export const selectParsedTranscript = createSelector(
  (state: RootState) => state.transcript.parsedTranscript,
  parsedTranscript => parsedTranscript
);

Answer 1

您的选择器确实没有“记住”任何东西。任何时候你使用 createSelector 输出选择器只是 x => x，没有真正的记忆发生。这完全等同于只是 state => state.x 的普通函数 - 您只是按原样返回字段。

根据您目前展示的代码，每当 state.transcript.rawTranscript 或 state.transcript.parsedTranscript 字段被 reducer 更新时，组件将重新呈现，效果将重新运行每次更新 state.transcript.rawTranscript 字段。

我建议通读 the recently updated Redux docs page on selectors 以更好地了解何时、如何以及为何编写记忆化选择器函数。

此外，对已解析的转录本产生 depend 效果，然后还分派一个看起来像是 saving 已解析值的动作，似乎有点奇怪，并且有可能导致额外的重新渲染。

除此之外

Redux createSelector 似乎没有记住结果

Redux createSelector doesn't appear to memoize results

reactjs

redux

react-redux

redux-toolkit