Pass Reagieren Router Params zu versenden

Question

Ich habe Probleme mit dem Zugriff und Weitergabe von Router-Parameter zur Dispatch-Funktion. Ich weiß nicht, ob ich etwas verpasse, aber kann mir jemand in die richtige Richtung zeigen. Ist es überhaupt möglich, so etwas zu tun, wenn nicht, wie kann ich diese Information weitergeben, die ich brauche? Hier ist der relevante 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> 

Answer 1

können Sie etwas tun, wie

verifyUser = (token) => { 
    return (dispatch) => { 
     ... 
    } 
} 

connect(mapStateToProps, { verifyUser })(VerificationPage)

Verwenden Sie ein onSave Verfahren innerhalb der Komponente

class VerificationPage extends React.Component { 
    onSave = (data) => { 
     this.props.verifyUser(this.props.params.token); 
    } 

    ... 
} 

<VerificationForm onSave={this.onSave} .../>

eine weitere Option ist partials

Sie lodash dies leicht bewerkstelligen können:

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

oder ohne lodash, nur einen Wickel Rückruf

<VerificationForm onSave={() => { this.props.onSave(this.props.params.token) } } ... />