如何只访问一次 React Redux 值？答案

【问题标题】：How to access React Redux value only once?如何只访问一次 React Redux 值？
【发布时间】：2021-01-18 21:59:53
【问题描述】：

我只想从 redux 存储中获取一次值，并在 useEffect 函数中使用一次。

不过，useSelector 必须位于组件的根级别，因此每次渲染都会运行它。这意味着如果我的 redux 存储中的值更新，所有子组件也会更新。

我不希望这种情况发生。（由于某种原因，redux 更新中断了我的一些动画）。我只希望它在安装组件时访问 useSelector 一次。

我怎样才能做到这一点？

当前不受欢迎的行为：

const Test = () => {
    const select = useSelector(state=> state); // updates every dispatch
    
    useEffect(()=> {
       console.log(select.value);
       }, []);
...
}

想要的行为，如果反应会让我...

const Test = () => {
    useEffect(()=> {
       const select = useSelector(state=> state); // only accessed once, doesn't update children on later dispatches
       console.log(select.value);
       }, []);
...
}

【问题讨论】：

标签： reactjs redux

【解决方案1】：

您可以抓住商店并使用它来获取状态。只要您不更改传递给 React Redux <Provider> 的存储，存储就不会更改。

const Test = () => {
  const store = useStore();
  console.log('Test rendered')

  useEffect(() => {
    const value = store.getState().value;
    console.log('useEffect value: ', value)
  }, [store]);

  // ...
};

【讨论】：

【解决方案2】：

可以使用useSelector的equality check函数：

const select = useSelector(state => state, () => true);

通过始终返回 true，您可以防止更新在该组件中挂载时选择的数据，从而防止重新渲染。

【讨论】：