React, Redux état clair à l'aide du cycle de vie Méthode

Question

EDIT 05/09/17:
Il se trouve que j'avais un problème avec une autre partie de mon code dans React qui réagissent m'a amené à croire que ma pile n'a pas été correctement réinitialisation . L'un des rares composants que je traduisais sur la page/Profile appelait array.length sur un tableau vide, et cette erreur empêchait mon code de fonctionner et mes navigateurs gelaient. Merci d'avoir regardé sans problème

Je tente de réinitialiser l'état d'un objet (appelons-le UID) dans mon magasin lorsqu'un composant est démonté. L'état initial de l'UID est une chaîne vide, lorsqu'un utilisateur clique sur un nom d'utilisateur (un utilisateur qui a créé un message) Je rends un composant de profil, mais avant que le composant de profil ne soit rendu, je remplis l'UID, et rendre un composant de profil qui correspond à l'UID. Ce que je voudrais faire maintenant, c'est effacer l'UID lorsque le composant Profile se démonte, donc si un utilisateur clique sur un nom d'utilisateur différent, je peux rendre un profil différent.

composant le profil:

class Profile extends Component { 
    componentWillUnmount() { 
    this.props.clearUserUid() 
    } 
    render() { 
    return (
     <Grid id="profile"> 

     <Grid.Row> 
      <Grid.Column className='profileheader'> 
      <ProfileHeader /> 
      </Grid.Column> 
      </Grid.Row> 

      <Grid.Row> 
      <Grid.Column> 
       <AddSocial/> 
       <ListOfSocialLinks/> 
      </Grid.Column> 
      </Grid.Row> 

     </Grid> 
    ); 
    } 
} 

action

export const clearUserUid = uid => ({ 
    type: 'CLEAR_UID', payload: '' 
}) 

Réducteur:

import initialState from './initialState'; 

export default function (userUid = initialState.userUid, action) { 
    switch (action.type) { 
    case 'CLEAR_UID': 
     return action.payload; 
    default: 
     return userUid; 
    } 

}

Etat initial

userUid: '', 

composant écouter userUid

class ListOfSocialLinks extends Component { 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
    if(this.props.userUid && this.props.userUid.length > 0) { 
     firebase.database().ref(`users/${this.props.userUid}/social`).on('value', snapshot => this.props.fetchSocial(snapshot.val())); 
    } 
    else { 
     firebase.database().ref(`users/${this.props.userData.uid}`).on('value', snapshot => { 
     return this.props.fetchSocial(snapshot.val()) 
     }) 
    } 
    } 


    render() { 
    const { social, userData } = this.props; 
    return (<div className="social"> { this.renderSocial(social, userData) }</div>); 
    } 
} 

userData.uid est toujours disponible pour l'utilisateur de visualiser leur propre profil. L'action clearUserUid s'exécute et l'état de mon magasin devient une chaîne vide, mais lorsque je clique sur un autre utilisateur après le démontage du composant de profil, j'obtiens une erreur sur la page. Comment puis-je réinitialiser correctement l'état du magasin à une chaîne vide?

Answer 1

Il semble que votre code manque dans votre exemple, mais je suppose que le composant lui-même n'est pas démontable. Lorsque les propriétés changent via redux, elles ne sont pas montées/démontées, elles sont juste restituées.

Vous pouvez verrouiller quelques événements. Ma suggestion est d'utiliser componentWillUpdate pour voir que l'uid paramater a changé et pour déclencher l'effacement.

// Invoked whenever there is a prop change 
// Called BEFORE render 
componentWillReceiveProps(nextProps) { 
    // Not called for the initial render 
    // Previous props can be accessed by this.props 
    // Calling setState here does not trigger an an additional re-render 
} 

// Called IMMEDIATELY BEFORE a render 
componentWillUpdate(nextProps, nextState){ 
    // You cannot use this.setState() in this method 
} 

// Called IMMEDIATELY AFTER a render 
componentDidUpdate(prevProps, prevState){ 
} 

Si ce n'est pas le cas, vous devrez peut-être retravailler la question avec plus d'un exemple.