React redux dispatch action trước khi render container

Question

Tôi rất mới để phát triển ứng dụng React-redux và tôi đang cố gắng hiểu cách gửi một hành động khác ngay khi tải trang. Sau đây là mã vùng chứa của tôi. Tôi đang sử dụng bản mẫu này (https://github.com/jpsierens/webpack-react-redux).

let locationSearch; 

const ActivationPage = ({activateUser}) => { 
    return (
     <div className="container"> 
      <h2>Activation Required</h2> 
      <p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p> 
      { activateUser() } 
     </div> 
    ); 
}; 


ActivationPage.propTypes = { 
    activateUser: PropTypes.func 
}; 


const mapStateToProps = (state) => { 
    return { 
     message: state.message, 
     currentUser: state.currentUser, 
     request: state.request 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     activateUser:() => { 
      console.log(location); 
      if (location.search !== '') { 
       locationSearch = querystring.parse(location.search.replace('?', '')); 
       console.log(locationSearch); 
       if (locationSearch.hasOwnProperty('user_id') && locationSearch.hasOwnProperty('activation_code')) { 
        // change request state to pending to show loader 
        dispatch(actions.requestActions.requestPending()); 

       } 
      } 
     } 
    }; 
}; 

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

Bộ luật này mang lại cho tôi Cảnh báo: setstate (...): Không thể cập nhật trong một cuộc chuyển trạng thái hiện lẽ bởi vì tôi đang cử một hành động trong thời gian làm cho chức năng (IDK). Làm thế nào tôi có thể chuyển đổi mã đã cho để kích hoạt chức năng activateUser() tự động ngay sau khi tải trang.

Answer 1

https://facebook.github.io/react/docs/react-component.html

componentWillMount() và componentDidMount() cho bạn. Và quan điểm của tôi - bạn nên tránh sử dụng các componentWillMount và thích componentDidMount - đây là ý nghĩa nếu bạn somewhen sẽ sử dụng máy chủ render

Answer 2

Got nó làm việc sau khi tôi chuyển đổi thành phần là một class mà extends Component Câu trả lời này đây giúp tôi với một số khái niệm How do you mix componentDidMount() with react-redux connect()? Sau đây là triển khai cho những người có thể nhầm lẫn về điều này như tôi.

import React, { Component, PropTypes } from 'react'; 
import { connect } from 'react-redux'; 
import actions from '../actions'; 

let locationSearch; 

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

    componentDidMount() { 
     this.props.activateUser(); 
    } 

    render() { 
     return (
     <div className="container"> 
      <h2>Activation Required</h2> 
      <p>An Activation Email was sent to your email address. Please check your inbox to find the activation link</p> 
     </div> 
     ); 
    } 
} 

ActivationPage.propTypes = { 
    activateUser: PropTypes.func 
}; 

const mapStateToProps = (state) => { 
    return { 
     request: state.request 
    }; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     activateUser:() => { 
      if (location.search !== '') { 
       locationSearch = querystring.parse(location.search.replace('?', '')); 
       if (locationSearch.hasOwnProperty('user_id') && locationSearch.hasOwnProperty('activation_code')) { 
        // change request state to pending to show loader 
        dispatch(actions.requestActions.requestPending()); 
       } 
      } 
     } 
    }; 
}; 

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