CODEWITHSUNDEEP
reactjsparametersreduxreact-router
Ilija Bradaš
Ilija Bradaš

Reputation: 645

Pass react router params to dispatch

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>

Upvotes: 1

Views: 2049

Answers (1)

Tyler Sebastian
Tyler Sebastian

Reputation: 9458

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

Upvotes: 1

Related Questions