如何在 React 应用启动时检索 localStorage 数据并使用 useEffect 将其存储在 Redux 中？ （它一直在清除我的数据）

Question

编辑：也许我不应该在同一个应用程序中结合 React 钩子和 mapStateToProps，而是使用 Redux 钩子（useSelector 等）？

在我的 React 应用程序中，我在 Redux 中有一组“朋友”数据。 我在我的一个组件中使用useEffect来将此数据存储到浏览器 localStorage 每次更改时。

// 'friends' is an array from Redux store,
// storeManyFriends is an action creator that will store to Redux
  const {friends, storeManyFriends} = props;

// store 'friends' to local storage each time it changes
useEffect(() => {
    try {
      persistData(friends,'my friends') // stores to local storage
    } catch (e) {
      console.log('error persisting data',e.message)
    }
  }, [friends]);

我想在应用程序启动时从 localStorage 加载该数据（如果存在）并使用useEffect将其存储在 Redux 中。

useEffect(() => {
// get stored 'friends' from local storage on component mount
    const storedFriends = retrievePersistedData('my friends') 
    if (storedFriends) {
      try {
        storeManyFriends(storedFriends)
      } catch (e) {
        console.log('error retrieving data',e.message)
      }
    }
   }, []);

问题是，似乎当应用程序重新启动时，第一个useEffect被一个空的friends数组调用，然后存储到 localStorage，清除了那里的内容。 我可以在存储之前检查数组是否为空，但有时数组会为空，因为有人没有朋友，我想存储那个空值。 处理这个问题的最佳方法是什么？

作为参考，Redux 存储初始 state 将是

export const originalState = {
  friends: [],
};

Answer 1

有3种情况：

• localStorage 中没有键
• 空数组
• 有数据的数组

获取时，如果空数组尚不存在，请先创建它。 这将确保您在保存时始终拥有一个密钥（带有一个空数组）。