Comment puis-je attendre que l'affectation du magasin réducteur soit terminée?

Question

J'utilise reac-native avec react-redux et redux-thunk. Fondamentalement, j'ai un Component connecté à store qui modifie certaines informations à partir de . Bien que chaque opération semble être synchrone, je reçois des données anciennes sur la ligne suivante après modification.

//reducer 
import {assign as _assign} from 'lodash-es'; 
let initialState = {name: '1'}; 
export default (state = initialState, action) => { 
    switch (action.type) { 
     case 'Project renamed': 
      return _assign({}, state, {name: action.data}); 

     default: 
      return state; 
    } 
}; 

//Component 
import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import Prompt from 'react-native-prompt'; 

class HomeScreen extends Component { 
    render() { 
     return <Prompt 
       onSubmit={() => { 
        this.props.onProjectRenamed('2'); 
        console.log(this.props.currentProject.name) //Still get '1' here!!! 
       }} 
      />; 
    } 
} 

const mapStateToProps = state => ({ 
    currentProject: state.currentProject 
}); 
const mapDispatchToProps = dispatch => ({ 
    onProjectRenamed: (data) => dispatch({ 
     type: 'Project renamed', 
     data: data 
    }) 
}); 
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen); 

Comment puis-je obtenir la nouvelle valeur this.props.currentProject.name?

Answer 1

Vous pouvez retourner une promesse de votre action et

const mapDispatchToProps = dispatch => ({ 
    onProjectRenamed: (data) => { 
     dispatch({ 
      type: 'Project renamed', 
      data: data 
     }) 
     return Promise.resolve() 
    } 
}); 

Maintenant, vous pouvez utiliser then sur onProjectRenamed

onSubmit={() => { 
    this.props.onProjectRenamed('2').then(() => console.log(this.props.currentProject.name)) 
}} 

Answer 2

Vous déclenchez une action lorsque onSubmit est invoquée. Cette action met à jour l'objet d'état, ce qui signifie que votre composant recevra de nouveaux accessoires. Si vous implémentez, ComponentWillReceiveProps ou ComponentWillUpdate méthodes de votre composant, puis essayez d'imprimer, console.log(nextprops.currentProject.name) l'intérieur, vous obtiendrez une réponse 2. Essayez simplement,

componentWillReceiveProps(nextProps) { 
    console.log(nexProps.currentProject.name) 
} 

Rappelez-vous quand la méthode render de votre composant est appelée après l'état a été mis à jour, this.props.currentProject.name aura la dernière valeur, c.-à-d. 2.

Référez-vous au composant Réagissez lifeCycle methods pour plus de détails.