Reactjs, reducers, language switching

Question

I have just taken over a new reactjs project -- and I am trying to review how language switching has been invoked.

so like there are two links in the footer to do this language switch.

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

--- so these are the header/footer components - and each has a json file that splits into an array of lang.

there is a file that looks like some global js that I think hooks into this - but I am struggling to extend this functionality into the rest of the site components/pages

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

---

ok - so here is the first page -- called services. Now what throws me first here is rather than use active_language its now just 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

The Footer component deals with setting the current language by invoking the Redux action creator selectLanguage. Essentially this dispatches an action (you can think of this as a custom event with some corresponding data - the language) to the store that will persist the user's language selection for use elsewhere.

In order to consume the language in other components, that language selection needs to be passed into the component (in this case the Header) from the Redux store.

This is the code of interest in header that does that...

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

export default connect(mapStateToProps)(Header)

Here you are connecting the Header to the store, with a function that describes how the store should map values into props on your react component. state.active_language is where the language that the user has selected is stored, and this is telling it to be passed as a prop called active_language on your Header component

The connect function is a decorator that will create what's know as a Higher Order Component (HOC) which is essentially a component with props or functionality automatically injected into it (decorated in this case with an automatically passed value for the active_language prop from the store)

You can do the same for any other component that need this language setting, or go a step or two further

Instead of passing the active language name, pass the corresponding language itself...

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)

OR better yet write another HOC that wraps any component you pass with this info...

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

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

Then in subsequent components with a language prop, decorate with this

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)