基于路由器更改应用程序状态

Question

我正在创建一个应用程序，其中有一个组件，该组件根据路由器位置显示数据 例如 localhost:8080/us 应该显示“美国国旗和一些与美国相关的文字” localhost:8080/in 应该显示“印度国旗和一些与印度相关的文字”

我有两个减速器，一个用于印度，另一个用于美国，我有一个 Root 减速器，如下所示

import  {combineReducers} from 'redux';

import IndiaData from './IndiaData';
import USData from './UsData';

const rootReducer = combineReducers({
    IndiaData,
    USData,
    ActiveData
});


export default rootReducer;

我的 Sample reducer IndiaData 如下所示

export default function() {
    return [
         {
                "StateName": "AP",
                "StateImg": "../static/image1.jpg",
             },
            {
                 "StateName": "TS",
                "StateImg": "../static/image2.jpg",
            },
            {
                 "StateName": "TN",
                "StateImg": "../static/image3.jpg",
            }
        ]
}

我在我的反应组件中使用 mapStateToProps，请找到 代码如下

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);

我的路由器配置如下

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>
);

所以最后我应该能够读取 url 路径中存在的内容，然后动态显示美国数据或印度数据，有人可以帮我解决这个问题吗？

提前感谢您的支持！！

Answer 1

您可以像这样制作路线：

然后通过this.props.params.country 访问容器中的country 参数。

在您的 mapStateToProps 函数中，您可以使用此常量来呈现正确的国家/地区数据。

   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
    };
}

另一种方法是导出两个不同的连接组件。

  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);

然后在你的路线中：

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>
);