如何将单个本地存储值被动地绑定到Redux?

c6ubokkw  于 2022-12-29  发布在  其他
关注(0)|答案(1)|浏览(107)

我有一个标准的React/Redux应用程序,当加载时,最初会拉取localStorage值(通过触发reducer的useEffect钩子等),然后在更改时存储/保存它们。
但是,我有遗留代码,它存储和保存这些localStorage值之一,并直接保存它。
它们都在同一个域中,因此localStorage值通过React应用或遗留代码保存。但我需要一种方法,使React/Redux端能够在localStorage从遗留代码更新时进行React性更新。

2lpgd968

2lpgd9681#

可以像这样处理Window: storage event

useEffect(() => {
  const localStorageListener = (event) => {
     const value = JSON.parse(window.localStorage.getItem('sampleValue'))
     dispatch(updateValue(value));
  };

  window.addEventListener('storage', localStorageListener);

  return () => {
    window.removeEventListener('storage', localStorageListener);
  };
}, []);

或者,您可以window.onstorage属性...但IMO侦听器在React中似乎更干净。

相关问题