Reactjs、reducers、语言切换

Question

我刚刚接手了一个新的 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)

// header.js

import React from 'react'
import { connect } from 'react-redux'
import { getLangDetails } from '../../actions/action_language'
import langObject from './Header.lang'

class Header extends React.Component {
  render () {
    let transparent
    transparent = this.props.transparent ? 'transparent' : ''
    const lang = getLangDetails(this.props.active_language, langObject)
    return (
      <div>
        <header className={` main_headerbar__landing transition show-for-large-up ${transparent} `}>
          <div className='contain-to-grid'>
            {lang}
          </div>
        </header>
      </div>
    )
  }
}

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

const { bool, string } = React.PropTypes
Header.propTypes = {
  transparent: bool,
  active_language: string
}

export default connect(mapStateToProps)(Header)

--- 所以这些是页眉/页脚组件 - 每个都有一个 json 文件，该文件拆分成一个 lang 数组。

有一个看起来像一些全局 js 的文件，我认为它与此挂钩 - 但我正在努力将此功能扩展到站点组件/页面的其余部分

//action_language.js

export const LANGUAGE_SELECTED = 'LANGUAGE_SELECTED'

export function selectLanguage (language) {
  return {
    type: LANGUAGE_SELECTED,
    payload: language
  }
}

export function getLangDetails (language = 'de', langObject) {
  const langData = langObject.langs.filter((langVar) => langVar.lang === language)
  return langData['0'].lines
}

---

好的——这是第一页——称为服务。现在让我首先想到的是而不是使用 active_language 它现在只是语言。

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

Answer 1

Footer 组件通过调用 Redux 操作创建者 selectLanguage 来处理设置当前语言。本质上，这会将一个操作（您可以将其视为具有一些相应数据 - 语言的自定义事件）发送到商店，该商店将保留用户的语言选择以在其他地方使用。

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

这是标题中感兴趣的代码......

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

export default connect(mapStateToProps)(Header)

在这里，您将 Header 连接到 store，并使用一个函数描述 store 应如何将值映射到 react 组件上的 props。 state.active_language 是存储用户选择的语言的位置，这告诉它在您的 Header 组件上作为名为 active_language 的道具传递

connect 函数是一个装饰器，它将创建所谓的高阶组件 (HOC)，它本质上是一个自动注入道具或功能的组件（在这种情况下，使用自动传递的 @ 值进行装饰） 987654326@来自商店的道具）

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

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

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)

然后在后续组件中用language 属性，用这个装饰

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)