I fetch user's data (including profile picture) using Redux. Sometimes the user changes his profile picture, redux updates it well but the update only appears when I restart the app. I want it to update automatically once the user uploads a new photo. I don't know how can I do that? Is it a problem in the profile picture component or the way I fetch data using Redux.
here's how I fetch user's data:
export function fetchUser() {
return (dispatch) => {
firebase
.firestore()
.collection('users')
.doc(firebase.auth().currentUser.uid)
.get()
.then((snapshot) => {
if (snapshot.exists) {
dispatch({ type: USER_STATE_CHANGE, currentUser: snapshot.data() });
} else {
console.log('does not exist');
}
});
};
}
and here's the profile picture component (which I want to update every time the user updates his photo):
function DrawerProfilePicture(props) {
const [image, setImage] = useState(null);
const { currentUser } = props;
useEffect(() => {
setImage(currentUser?.pp);
}, [currentUser?.pp]);
if (!currentUser) {
return (
<View>
</View>
);
}
return (
{!image ? (
<Image
style={{ width: 100, height: 100 }}
source={require('../../assets/default.png')}
/>
) : (
<Avatar.Image size={100} source={{ uri: image }} />
)}
);
}
const mapStateToProps = (store) => ({
currentUser: store.userState.currentUser,
});
export default connect(mapStateToProps, null)(DrawerProfilePicture);
const { currentUser } = props;
useEffect(() => {
setImage(currentUser.pp);
}, [currentUser.pp]);
The problem when you use empty brackets [] its update state only once when component rendered, when you add parameters it will re-render each time this parameter updated