Should I avoid mixing React hooks and mapStateToProps in my application and instead use Redux hooks like useSelector?
In my React app, I have an array of 'friend' data stored in Redux. Using useEffect in one of my components, I am saving this data to browser localStorage every time it changes.
// '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]);
I want to load the localStorage data when the app starts and store it in Redux using 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)
}
}
}, []);
The issue is that on app restarts, the first useEffect is being called with an empty 'friends' array, which then overwrites the localStorage data. Checking for an empty array before storing it might not be ideal since an empty array could also be a valid case. How can I best handle this situation?
For your information, the initial state of the Redux store would be:
export const originalState = {
friends: [],
};