Question

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

 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

您可以执行类似

的操作

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

另一个选项是partials

您可以使用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) } } ... />

通过反应路由器参数调度

1 个答案: