[英]React redux dispatch action before render container
I am very new to React-redux applications development and I am trying to understand how to dispatch another action as soon as the page loads. 我是React-redux应用程序开发的新手,我试图了解如何在页面加载后立即发送另一个操作。 Following is my container code.
以下是我的容器代码。 I am using this ( https://github.com/jpsierens/webpack-react-redux ) boilerplate.
我正在使用这个( 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);
This Code gives me Warning: setState(…): Cannot update during an existing state transition probably because I am dispatching an action during the render function (IDK). 此代码为我提供警告:setState(...):在现有状态转换期间无法更新,可能是因为我在渲染功能(IDK)期间调度了一个动作。 How can I convert the given code to trigger the activateUser() function automatically as soon as the page loads.
如何在页面加载后自动转换给定代码以自动触发activateUser()函数。
https://facebook.github.io/react/docs/react-component.html https://facebook.github.io/react/docs/react-component.html
componentWillMount()
and componentDidMount()
for you. componentWillMount()
和componentDidMount()
。 And my opinion - you should avoid using the componentWillMount
and prefer the componentDidMount
- this is make sense if you somewhen will be using server rendering 我的意见 - 你应该避免使用
componentWillMount
并更喜欢componentDidMount
- 如果你将使用服务器渲染,这是有意义的
Got it working after I converted the component to be a class
which extends Component
This answer here helped me with some of the concepts How do you mix componentDidMount() with react-redux connect()? 在我将组件转换为
extends Component
的class
之后,它已经工作了这个答案在这里帮助了我一些概念如何将componentDidMount()与react-redux connect()混合? Following is the implementation for those who might be confused about this as I was. 以下是那些可能会像我一样对此感到困惑的人的实施。
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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.