Редактировать: возможно, мне не следует объединять хуки 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 при запуске приложения (если оно существует) и сохранить их в Redux, используя useEffect.
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 будет
export const originalState = {
friends: [],
};