我如何记住 `useSelector()` 的值？

Question

我的代码看起来像这样：

const countersSelector = () => (store) => store.counters;

const MethodOne = () => {
  // Method: Object destructuring
  const counters = useSelector(countersSelector);

  console.log("render MethodOne");

  useEffect(() => {
    console.log("in useeffect methodone");
  }, [counters]);

  return (
    <div>
      <p>{`firstCounter: ${counters}`}</p>
      <p>{`renders: ${renderCount}`}</p>
    </div>
  );
};

export default MethodOne;

这是完整的应用程序： https://codesandbox.io/s/redux-useselector-object-destructuring-example-forked-1m87x

并且每次 counters 对象发生变化（不是它的值，而是对象引用本身）时，useEffect() 就会被触发。

我能以某种方式记住它吗，这样 counters 只会在 store.counters 的实际值发生变化时发生变化？

Answer 1

我不确定你在这里问什么。

state.counters 更改为新的对象引用是不可变更新的工作方式。 Immutable updates always require updating _all nested fields。因此，如果该操作应该更新 rootState.counters.firstCounter，则需要为 counters 创建一个新对象并为 rootState.

创建一个新对象

因此，如果您的选择器是 state => state.counters，那么 useSelector 将在每次 counters 对象更改为时 重新渲染组件一个新的引用，useEffect 将重新运行因为它的依赖项数组中有一个新的引用，这正是它应该如何工作的。

附带说明一下，您的 countersSelector 不正确。它被写成 returns 选择器的“工厂函数”。这意味着 useSelector 实际上会查看 新函数引用 ，而不是 从状态 中提取的值。

相反，它应该只是 state => state.counters。

我如何记住 `useSelector()` 的值？

How can i memoize a value of `useSelector()`?

css-selectors

redux

redux-toolkit