ReactuxアクションペイロードがcomponentDidMountにありません

Question

私はcomponentWillMountで呼び出しているアクション作成者を持っています。そのアクションペイロードの戻り値はsetStateを使用して状態に割り当てられています。しかし、componentDidMountでは、非同期呼び出しがまだ完了していないため、そのプロパティにアクセスできません。 compoentDidMountでこのデータにアクセスする正しい方法は何ですか？

//component 
class Dashboard extends Component { 

componentWillMount() { 
    this.setState(this.props.getUser()); 
    } 

componentDidMount() { 
    // this.state.user isn't available yet 
} 

render(){ 
    return(...); 
} 
} 

//action 
export function getUser() { 
    return async function (dispatch) { 
    const user = await axios.get(`${API_URL}user?token=${token}`); 
    return dispatch({ 
     type: USER, 
     payload: user, 
    }); 
    } 
    }; 
} 

Answer 1

Axiosは約束を返し、解決するまで待たなければなりません。このような成功のアクションを派遣し、

export function getUser() { 
    return function (dispatch) { 
    axios.get(`${API_URL}user?token=${token}`) 
     .then(user => { 
      return dispatch(getUserSuccess(user)); 
     }).catch(error => { 
      throw error; 
     }); 
    } 
    }; 

    export function getUserSuccess(user) { 
    return {type: USER, payload: user}; 
    } 

はまた、それはあなたのコンポーネントにuserをもたらすように、あなたはmapStateToPropsを持っている必要があることに注意してください。その後、コンポーネント内でthis.props.userを使用してアクセスできます。それはこのようにすべきです。

UserPage.propTypes = { 
    user: PropTypes.object.isRequired 
}; 

function mapStateToProps(state, ownProps) { 
    return { 
    user: state.user 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators({getUser}, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(UserPage); 

最後に、このようにユーザーにアクセスできます。

componentWillReceiveProps(nextProps) { 
    if (nextProps.user !== this.state.user) { 
     this.setState({ 
      user: nextProps.user 
     }); 
    } 
} 

今、あなたのコンポーネント内userを使用することができます。

render() { 
    const {user} = this.props; 
    return(
     <div> 
     <div>user.name</div> 
     </div> 
    ); 
    } 

Answer 2

次の例のように、それを行うためにcomponentWillReceivePropsを使用する必要があります。

Here詳細については、こちらをご覧ください。