감속기 저장소 지정이 완료 될 때까지 어떻게 기다릴 수 있습니까?

Question

나는 react-redux 및 redux-thunk와 함께 react-native를 사용하고 있습니다. 기본적으로 나는 Component을 에 연결하여 어떤 정보를 dispatch으로 수정합니다. 모든 작업이 동기식 인 것으로 보이지만 수정 후 다음 줄에 오래된 데이터가 표시됩니다.

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

어떻게 새 this.props.currentProject.name 값을 얻을 수 있습니까?

Answer 1

당신은 당신의 행동에서 약속을 반환 할 수 있습니다 및

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

이제 onSubmit가 호출 될 때 당신은 행동을 유발하는 onProjectRenamed

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

Answer 2

에 then를 사용할 수 있습니다. 이 작업은 상태 객체를 업데이트합니다. 즉, 구성 요소가 새 소품을받습니다. 당신이 구현하는 경우 , ComponentWillReceiveProps 또는 ComponentWillUpdate 구성 요소의 방법 다음은

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

이 구성 요소의 render 방법은 이후에 호출 될 때 기억, 당신은 단순히 시도 2. 같은 응답을 얻을 것이다, 그 안에 console.log(nextprops.currentProject.name), 인쇄하려고 상태가 업데이트되었으므로 this.props.currentProject.name의 최신 값이 2가됩니다.

자세한 내용은 React Component lifeCycle methods을 참조하십시오.