Javascript Reactjs、reducer、语言转换

我刚刚接手了一个新的reactjs项目——我正试图回顾语言转换是如何被调用的

因此，页脚中有两个链接可以进行语言切换

//footer.js

import React from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { selectLanguage, getLangDetails } from '../../actions/action_language'
import langObject from './Footer.lang'

class Footer extends React.Component {
  constructor (props) {
    super(props)
    this.changeLanguageToGerman = this.changeLanguageToGerman.bind(this)
    this.changeLanguageToEnglish = this.changeLanguageToEnglish.bind(this)
  } 

  changeLanguageToGerman () {
    this.props.selectLanguage('de')
  }

  changeLanguageToEnglish () {
    this.props.selectLanguage('en')
  } 

  render () {
    let activeLang = 'language--active'
    let alternativeLang = 'language--hover'
    const lang = getLangDetails(this.props.active_language, langObject)
    return (
      <div>
        <footer className='main-footer show-for-medium-only'>
          <div className='medium-15 columns'>
            <p className='text--white grid__row--offset--15 footer-text'>
              <Link to={this.props.deURL} className={`text--white footer-text ${this.props.active_language === 'de' ? activeLang : alternativeLang}`} onClick={this.changeLanguageToGerman}>DE</Link>
              &nbsp;&nbsp;&#124;&nbsp;&nbsp;
              <Link to={this.props.enURL} className={`text--white footer-text ${this.props.active_language === 'en' ? activeLang : alternativeLang}`} onClick={this.changeLanguageToEnglish}>EN</Link>
            </p>
          </div>
        </footer>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    active_language: state.active_language
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({selectLanguage: selectLanguage}, dispatch)
}

const { string, func } = React.PropTypes
Footer.propTypes = {
  deURL: string,
  enURL: string,
  selectLanguage: func,
  active_language: string
}

export default connect(mapStateToProps, mapDispatchToProps)(Footer)

---

好的，这是第一页，叫做服务。现在我首先想到的不是使用主动语言，而是现在使用的语言

//services.js

import React from 'react'
import Header from '../HeaderLanding/Header'
import Footer from '../Footer/Footer'
import NoBundle from './NoBundle'
import HowTiles from './HowTiles'
import CarouselTiles from './CarouselTiles'
import YourAdvantages from './YourAdvantages'
import InformationTiles from './InformationTiles'
import ContactTiles from './ContactTiles'

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { selectLanguage, getLangDetails } from '../../actions/action_language'

// language file
import langObject from './services.lang.json'

//  services css
import './services.css'

// getting the distinct URLs from the lang files
const deURL = langObject.langs[0].pageURL
const enURL = langObject.langs[1].pageURL

const Spacers = () => (
  <div>
    <div className='row show-for-large-up' style={{ height: '250px' }} />
    <div className='row show-for-medium-only' style={{ height: '150px' }} />
    <div className='row show-for-small-only' style={{ height: '80px' }} />
  </div>
)

class Services extends React.Component {
  constructor (props) {
    super(props)
    this.language = props.match.params.langURL
  }
  componentWillMount () {
    document.getElementById('body').className = 'overlay-background-services'

    this.updateLanguage()
  }
  updateLanguage () {
    console.log('updatelang', this.language)
    if (this.language === 'de' || !this.language) {
      this.props.selectLanguage('de')
    } else {
      this.props.selectLanguage('en')
    }
  }
  componentWillUnmount () {
    document.getElementById('body').className = ''
  }

  render () {
    const lang = getLangDetails(this.language, langObject)
    return (
      <div>
        <Header transparent />
        <Spacers />
        <NoBundle lang={lang} />
        <HowTiles />
        <CarouselTiles />
        <YourAdvantages />
        <InformationTiles />
        <ContactTiles />
        <Footer deURL={deURL} enURL={enURL} />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    language: state.language
  }
}

function mapDispatchToProps (dispatch) {
  return bindActionCreators({selectLanguage: selectLanguage}, dispatch)
}

const { func, string, object } = React.PropTypes
Services.propTypes = {
  selectLanguage: func,
  langURL: string,
  params: object,
  match: object
}

export default connect(mapStateToProps, mapDispatchToProps)(Services)

从“React”导入React
从“../HeaderLanding/Header”导入头
从“../Footer/Footer”导入页脚
从“./NoBundle”导入NoBundle
从“/HowTiles”导入HowTiles
从“./carouseliles”导入旋转木马
从“/YourAdvantage”导入您的优势
从“./InformationTiles”导入InformationTiles
从“/ContactTiles”导入ContactTiles
从“react redux”导入{connect}
从“redux”导入{bindActionCreators}
从“../../actions/action\u language”导入{selectLanguage，getLangDetails}
//语言文件
从“./services.lang.json”导入langObject
//服务css
导入“./services.css”
//从lang文件获取不同的URL
const deURL=langObject.langs[0]。页面URL
常量enURL=langObject.langs[1]。页面URL
常量间隔=（）=>(
)
类服务扩展了React.Component{
建造师（道具）{
超级（道具）
this.language=props.match.params.langul
}
组件将安装（）{
document.getElementById（'body'）。className='overlay background services'
this.updateLanguage（）
}
更新语言（）{
console.log（'updatelang'，this.language）
if（this.language=='de'| |！this.language）{
this.props.selectLanguage（'de'））
}否则{
this.props.selectLanguage（'en'）
}
}
组件将卸载（）{
document.getElementById（'body'）。className=''
}
渲染（）{
const lang=getLangDetails（this.language，langObject）
返回(
)
}
}
常量mapStateToProps=（状态）=>{
返回{
语言：国语
}
}
功能图DispatchToprops（调度）{
返回bindActionCreators（{selectLanguage:selectLanguage}，dispatch）
}
const{func，string，object}=React.PropTypes
Services.propTypes={
选择语言：func，
语言：字符串，
参数：对象，
匹配：对象
}
导出默认连接（mapStateToProps、mapDispatchToProps）（服务）

页脚组件通过调用Redux action creator

selectLanguage

来设置当前语言。本质上，这会将一个操作（您可以将其视为一个带有一些相应数据的自定义事件-语言）发送到存储区，该存储区将保留用户的语言选择以供其他地方使用

为了使用其他组件中的语言，需要将该语言选择从Redux存储区传递到组件（在本例中为标头）

这是标题中感兴趣的代码，用于

const mapStateToProps = (state) => {
  return {
    active_language: state.active_language
  }
}

export default connect(mapStateToProps)(Header)

在这里，您使用一个函数将标题连接到商店，该函数描述商店如何将值映射到react组件上的道具<代码>状态。active_language是存储用户选择的语言的地方，它告诉用户将其作为标题组件上名为

active_language

的道具传递

connect

函数是一个装饰器，它将创建所谓的高阶组件（HOC），这本质上是一个组件，其道具或功能自动注入其中（在这种情况下，装饰器会自动传递来自商店的

active\u language

道具的值）

您可以对需要此语言设置的任何其他组件执行相同的操作，或者进一步执行一两步

传递相应的语言本身，而不是传递活动语言名称

import { getLangDetails } from '../../actions/action_language'
import langObject from './Header.lang'

const mapStateToProps = (state) => {
  return {
    active_language: getLangDetails(state.active_language, langObject)
  }
}

export default connect(mapStateToProps)(Header)

或者最好写另一个HOC，用此信息包装您传递的任何组件

import { getLangDetails } from '../../actions/action_language'

export default const injectLanguage = (component, langObject) => connect((state) => ({
    language: getLangDetails(state.active_language, langObject)
  })
)(component)

然后在后续组件中使用

语言

道具，用以下内容装饰

import injectLanguage from './some/where'
import langObject from './MyLanguageDetailsAwareComponent.lang'

class MyLanguageDetailsAwareComponent extends React.Component {

  render() {
    return this.props.language
  }

}

export default injectLanguage(MyLanguageDetailsAwareComponent, langObject)

---

你能更具体地说明你在挣扎什么吗？很难回答你的问题，因为。。你并不是真的在问问题，是的，把它放在一个问题里对我来说有点难。实际上，您有一个通过页脚中的两个链接调用的开关，因此它将使用json文件中的数据更改页脚的语言内容收割台也正确地拾取了此更改。-我想我的第一个问题是——这是解决这个问题的最好方法吗——只关注页眉/页脚代码——第二个问题是在网站的其他部分都有这样的逻辑。你的第一个问题是：我不知道你的应用程序还有什么其他方面。。但这似乎是明智的。你的第二个问题仍然不是问题。也许可以先去某个地方试试。。也许它会工作，出错，或者你会被困在尝试中，。然后再回来问一下我遇到的问题-我开始在处理实际页面的组件中添加类似的逻辑处理-它由较小的组件组成-它可以将页面刷新到该url-但不会在开关上更新我认为页面文件中的mapStateToProps-似乎不会随着更改而更新--不像页眉/页脚Hello@alechill我已经更新了问题-向您展示了我在页面核心部分切换语言的问题--service.js看起来像是通过商店道具传递的

语言

，从未使用过，也可以从一个路由或某个匹配的东西，然后在每次组件更新时将存储值重置为路由中匹配的值，完全忽略并覆盖存储。似乎您的页面和页脚选择器在页面筛选中相互作用。如果用户已经设置了存储设置，则将更改为

this.language=props.language | | props.match.params.langURL

，但

import { getLangDetails } from '../../actions/action_language'

export default const injectLanguage = (component, langObject) => connect((state) => ({
    language: getLangDetails(state.active_language, langObject)
  })
)(component)

import injectLanguage from './some/where'
import langObject from './MyLanguageDetailsAwareComponent.lang'

class MyLanguageDetailsAwareComponent extends React.Component {

  render() {
    return this.props.language
  }

}

export default injectLanguage(MyLanguageDetailsAwareComponent, langObject)