Passing route parameter to reducer method in reactjs - reactjs

Question

I am using routes with react-router as below
<Route path="product/:id" component={Product}/>
I am having component product as below code as below
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>
);
}
}
I want to pass parameter id to reducer method load, How to pass route parameter here in correct way?

Answer 1

You can send it in either componentWillMount() or componentDidMount(). Don't send it in render method since it fires every time you have new props or state changes.
you can access route params from this.props.params.
So try like this in your container
componentDidMount(){
const {id} = this.props.params;
this.props.load(id); //you can send params values after component get mounted.
}
And your container will look something like this
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>
);
}
}

Answer 2

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