通过反应路由器参数调度(Pass react router params to dispatch)

通过反应路由器参数调度(Pass react router params to dispatch)

我在访问和传递反应路由器参数到调度功能时遇到问题。 我不知道我是否遗漏了某些东西，但有些人可能会指出我正确的方向。 甚至可能做这样的事情，如果不是我怎么能通过我需要的这条信息。 这是相关的代码：

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) } } ... />