我在访问和传递反应路由器参数到调度功能时遇到问题。 我不知道我是否遗漏了某些东西,但有些人可能会指出我正确的方向。 甚至可能做这样的事情,如果不是我怎么能通过我需要的这条信息。 这是相关的代码:
export function verifyUser(token) { //here i want to have params form react router object return dispatch => { dispatch(isLoading(true)); axios.get('/auth/verify/' + token) .then(response => { dispatch(_verifyUserSuccess(response.data.message)); dispatch(isLoading(false)); // browserHistory.push('/signin'); }) .catch(error => { if (error.response) { dispatch(_verifyUserFailure(error.response.data.message)); dispatch(isLoading(false)); } else { // Something happened in setting up the request that triggered an Error console.log(error.message); } }); }; } import React, {Component} from 'react'; import VerificationForm from './VerificationForm'; import {connect} from 'react-redux'; import { verifyUser } from '../../actions/actionVerify'; import { Grid, Row, Col } from 'react-bootstrap'; class VerificationPage extends Component { constructor(props) { super(props); console.log(this.props); const { params } = this.props; } render() { return ( <Grid> <Row> <Col sm={6} smPush={3}> <VerificationForm onSave={this.props.onSave} message={this.props.message} isLoading={this.props.isLoading}/> </Col> </Row> </Grid> ); } } function mapStateToProps(state) { return { message: state.verify.message, isLoading: state.form.isLoading }; } function mapDispatchToProps(dispatch) { return { onSave: () => dispatch(verifyUser(this.props.params.token)) //here when i pass params.token i got undefined when action is called }; } export default connect(mapStateToProps, mapDispatchToProps)(VerificationPage); <Route path="/" component={App}> <IndexRoute component={Greetings}/> <Route path="/signup" component={SignupPage}/> <Route path="/signin" component={SigninPage}/> <Route path="/verify/:token" component={VerificationPage} /> </Route>I'am having problem with accessing and passing react router params to dispatch function. I don't know if I'm missing something, but can some one point me in right direction. Is it even possible to do something like this if not how can i pass this piece of information that i need. Here is the relevant code:
export function verifyUser(token) { //here i want to have params form react router object return dispatch => { dispatch(isLoading(true)); axios.get('/auth/verify/' + token) .then(response => { dispatch(_verifyUserSuccess(response.data.message)); dispatch(isLoading(false)); // browserHistory.push('/signin'); }) .catch(error => { if (error.response) { dispatch(_verifyUserFailure(error.response.data.message)); dispatch(isLoading(false)); } else { // Something happened in setting up the request that triggered an Error console.log(error.message); } }); }; } import React, {Component} from 'react'; import VerificationForm from './VerificationForm'; import {connect} from 'react-redux'; import { verifyUser } from '../../actions/actionVerify'; import { Grid, Row, Col } from 'react-bootstrap'; class VerificationPage extends Component { constructor(props) { super(props); console.log(this.props); const { params } = this.props; } render() { return ( <Grid> <Row> <Col sm={6} smPush={3}> <VerificationForm onSave={this.props.onSave} message={this.props.message} isLoading={this.props.isLoading}/> </Col> </Row> </Grid> ); } } function mapStateToProps(state) { return { message: state.verify.message, isLoading: state.form.isLoading }; } function mapDispatchToProps(dispatch) { return { onSave: () => dispatch(verifyUser(this.props.params.token)) //here when i pass params.token i got undefined when action is called }; } export default connect(mapStateToProps, mapDispatchToProps)(VerificationPage); <Route path="/" component={App}> <IndexRoute component={Greetings}/> <Route path="/signup" component={SignupPage}/> <Route path="/signin" component={SigninPage}/> <Route path="/verify/:token" component={VerificationPage} /> </Route>最满意答案
你可以做点什么
verifyUser = (token) => { return (dispatch) => { ... } }connect(mapStateToProps, { verifyUser })(VerificationPage)
在组件中使用onSave方法
class VerificationPage extends React.Component { onSave = (data) => { this.props.verifyUser(this.props.params.token); } ... }<VerificationForm onSave={this.onSave} .../>
另一种选择是局部的
你可以使用lodash轻松完成这个任务:
connect(mapStateToProps, (dispatch) => { onSave: (token) => dispatch(verifyUser(token)) // note that I added an argument, here })(VerificationPage) ... <VerificationForm onSave={ _.partial(this.props.onSave, this.props.params.token) } ... />或者没有lodash,只使用包装回调
<VerificationForm onSave={ () => { this.props.onSave(this.props.params.token) } } ... />You can do something like
verifyUser = (token) => { return (dispatch) => { ... } }connect(mapStateToProps, { verifyUser })(VerificationPage)
Use an onSave method within the component
class VerificationPage extends React.Component { onSave = (data) => { this.props.verifyUser(this.props.params.token); } ... }<VerificationForm onSave={this.onSave} .../>
another option is partials
you can use lodash to accomplish this easily:
connect(mapStateToProps, (dispatch) => { onSave: (token) => dispatch(verifyUser(token)) // note that I added an argument, here })(VerificationPage) ... <VerificationForm onSave={ _.partial(this.props.onSave, this.props.params.token) } ... />or without lodash, just using a wrapping callback
<VerificationForm onSave={ () => { this.props.onSave(this.props.params.token) } } ... />更多推荐
dispatch,function,message,电脑培训,计算机培训,IT培训"/> <meta name="des
发布评论