Changing Application State based on Router - reactjs

Question

I'm creating a application where I have a component which shows data based on the router location
for example
localhost:8080/us should show "USA flag and some text related to United States"
localhost:8080/in should show "India flag and some text related to India"
I have two reducers one for India and other for US and I have a Root reducer as shown bellow
import {combineReducers} from 'redux';
import IndiaData from './IndiaData';
import USData from './UsData';
const rootReducer = combineReducers({
IndiaData,
USData,
ActiveData
});
export default rootReducer;
My Sample reducer IndiaData is as bellow
export default function() {
return [
{
"StateName": "AP",
"StateImg": "../static/image1.jpg",
},
{
"StateName": "TS",
"StateImg": "../static/image2.jpg",
},
{
"StateName": "TN",
"StateImg": "../static/image3.jpg",
}
]
}
I'm using mapStateToProps in my react component, please find the
code below
import React, {Component} from 'react';
import {connect} from 'react-redux';
import styles from '../styles/custom.css'
class CountryData extends React.Component {
Country(){
return this.props.usdata.map((Data)=>{
return(
<div className="col-md-4">
<img className="panel" src={Data.StateImg}/>
<p>{Data.StateName}</p>
</div>
);
})
}
render(){
return(
<div>
<div className="container margin-top jumbotron">
{this.Country()}
</div>
</div>
);
}
}
function mapStateToProps (state){
return {
indiadata: state.IndiaData,
usdata: state.USData,
};
}
export default connect(mapStateToProps)(CountryData);
and my router configuration is as below
import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/app';
import CountryData from './components/CountryData';
export default (
<Route path ="/" component={App}>
<Route path="in" component={CountryData} />
<Route path="us" component={CountryData} />
</Route>
);
So Finally I should be able to read what is present in the url path and then show US data or India data dynamically, can some one please help me with this?
Thank you for your support in advance!!

Answer 1

You can make a route like so:
And then access that country param in the container via this.props.params.country.
In your mapStateToProps function, you could use this constant to render the correct country data.
return this.props.data.map((Data)=>{
return(
<div className="col-md-4">
<img className="panel" src={Data.StateImg}/>
<p>{Data.StateName}</p>
</div>
);
})
...
// other code here
...
function mapStateToProps (state, props){
return {
data: props.params.country === 'in'
? state.IndiaData
: state.USData
};
}
Another way would be to export two different connected components.
return this.props.data.map((Data)=>{
return(
<div className="col-md-4">
<img className="panel" src={Data.StateImg}/>
<p>{Data.StateName}</p>
</div>
);
})
...
// other code here
...
function IndiaData (state){
return {
data: state.IndiaData
};
}
function USData (state){
return {
data: state.USData
};
}
export const India = connect(IndiaData)(CountryData);
export const US = connect(USData)(CountryData);
then in your routes:
import React from 'react';
import {Route, IndexRoute} from 'react-router';
import App from './components/app';
import { India, US } from './components/CountryData';
export default (
<Route path ="/" component={App}>
<Route path="in" component={India} />
<Route path="us" component={US} />
</Route>
);