如何只访问一次React Redux值?

7rfyedvj  于 12个月前  发布在  React
关注(0)|答案(3)|浏览(149)

我只想从redux store中获取一次值,然后在useEffect函数中使用一次。
但是useObject必须位于组件的根级别,所以它会在每次渲染时运行。这意味着如果我的redux store中的值被更新,所有的子组件也会被更新。
我不希望发生这种情况。(由于某些原因,redux更新中断了我的一些动画)。我只希望它在组件挂载时访问useServer一次。
我该如何实现这一点?
当前不需要的行为:

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

字符串
想要的行为,如果React会让我...

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

ar7v8xwq

ar7v8xwq1#

你可以使用useReader的相等性检查功能:

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

字符串
通过返回always true,您可以防止更新在该组件中挂载时选择的数据,从而防止重新呈现。

pobjuy32

pobjuy322#

你可以直接获取store并使用它获取状态。只要你没有更改传递给React Redux <Provider>的store,store就不会更改。

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

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

  // ...
};

字符串

6jjcrrmo

6jjcrrmo3#

equality-check method确实避免了呈现,但订阅仍然是活动的,一些(可能无关紧要的)代码仍然运行。
如果这很重要,以下内容完全避免了订阅。

const store = useStore();
const [myState] = React.useState(() => store.getState().myState);

字符串

相关问题