javascript - 我可以使用 useSelector() 返回更深层次的嵌套属性/状态值吗？

Question

来自 react-redux 官方 docs :

When an action is dispatched, useSelector() will do a reference comparison of the previous selector result value and the current result value. If they are different, the component will be forced to re-render. If they are the same, the component will not re-render.

如果我做了这样的事情:
Redux 状态

state = {
  groupAB: {
    propA: valueA,
    propB: valueB
  },
  propC,
  // ETC
}

SomeComponent.tsx

const propA = useSelector((state) => state.groupAB.propA);

如果 groupAB 对象改变了它的引用(因为 propB 发生了变异)但 propA: valueA 保持不变，这个组件会如何表现？
我的期望:
即使 groupAB 改变，组件也不应该重新渲染，因为 useSelector() 关心的是返回，在这个例子中是 valueA 。我对吗？

Answer 1

在 doc 中，我们有:

When the function component renders, the provided selector function will be called and its result will be returned from the useSelector() hook. (A cached result may be returned by the hook without re-running the selector if it's the same function reference as on a previous render of the component.)

您使用箭头函数作为选择器函数，因此每次渲染中的引用永远不会相同，并且永远不会从缓存中读取结果。
顺便说一下，我们还有:

when an action is dispatched to the Redux store, useSelector() only forces a re-render if the selector result appears to be different than the last result.

因为选择器函数的返回值是一个原始值——它是一个简单的字符串，不被识别为对象的一部分或与对象相关的东西(我认为这是你关心的)——而且正如你所说，在这种情况下它不会改变，它将考虑与前一个相同，并且不会强制重新渲染组件。
因此，最后，每次重新渲染组件时都会触发该函数，但是更改不会导致更改提到的原始值的部分 store 不会以重新渲染组件结束。