傳遞路線參數以減速器方法在reactjs

Question

我使用與反應路由器路由如下

<Route path="product/:id" component={Product}/> 

我有組分產品如以下代碼如下

import React, {PropTypes} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import { asyncConnect } from 'redux-async-connect'; 
import {load, isLoaded} from 'redux/modules/viewlodging'; 

@asyncConnect([{ 
    promise: ({ store: { dispatch, getState } }) => { 
     const promises = []; 
     if (!isLoaded(getState())) { 
      promises.push(dispatch(load())); 
     } 
     return Promise.all(promises); 
    } 
}]) 

@connect(
    state => ({viewdata: state.viewlodging.data}), 
    dispatch => bindActionCreators({load}, dispatch) 
) 

export default class Product extends React.Component { 

    static propTypes = { 
     viewdata: PropTypes.object, 
     location: PropTypes.object, 
     load: PropTypes.func.isRequired 
    } 

    render() { 
     console.log(this.props.routeParams.id); // here I get routeparameter 
     const { viewdata } = this.props; 
     return (
      <div> 
       <div>Sample test</div> 
       </div> 
       <Footer/> 
       <Viewfootertext viewdata={viewdata}/> 
      </div> 
     ); 
    } 
} 

我想通過參數id到reducer方法load，如何正確地傳遞路由參數？

Answer 1

@asyncConnect([{ 
    promise: ({ store: { dispatch, getState }, params: { id }, }) => { 
    const promises = []; 
    if (!isLoaded(getState())) { 
    promises.push(dispatch(load(id))); 
    } 
    return Promise.all(promises); 
} 
}]) 

傳遞ID使用參數爲我工作

Answer 2

您可以發送它componentWillMount()或componentDidMount()。不要以render方法發送它，因爲每當你有新的道具或狀態改變時它就會觸發。您可以從this.props.params訪問routeparams。

因此，嘗試像這樣在你的container

componentDidMount(){ 
    const {id} = this.props.params; 
    this.props.load(id); //you can send params values after component get mounted. 
    } 

而且你的容器會是這個樣子

import React, {PropTypes} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import {asyncConnect} from 'redux-async-connect'; 
import {load, isLoaded} from 'redux/modules/viewlodging'; 
@asyncConnect([{ 
    promise: ({ 
    store: { 
     dispatch, 
     getState 
    } 
    }) => { 
    const promises = []; 
    if (!isLoaded(getState())) { 
     promises.push(dispatch(load())); 
    } 
    return Promise.all(promises); 
    } 
}]) 

@connect(
    state => ({ 
    viewdata: state.viewlodging.data 
    }), 
    dispatch => bindActionCreators({ 
    load 
    }, dispatch) 
) 

export default class Product extends React.Component { 
    static propTypes = { 
    viewdata: PropTypes.object, 
    location: PropTypes.object, 
    load: PropTypes.func.isRequired 
    } 
    componentDidMount(){ 
    const {id} = this.props.params; 
    this.props.load(id); //you can send params values after component get mounted. 
    } 
    render() { 
    console.log(this.props.routeParams.id); // here I get routeparameter 
    //don't send in render method, since it'll be called many times 
    const { 
     viewdata 
    } = this.props; 
    return (<div> 
     <div> Sample test < /div> < /div> < Footer/> 
     < Viewfootertext viewdata = { 
     viewdata 
     } 
     /> < /div> 
    ); 
    } 
}