如何在 Redux 状态更新时更新功能组件？

Question

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);

Answer 1

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