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

돌아 오는 동작 작성자 selectLanguage를 호출하여 현재 언어 설정과 바닥 글의 구성 요소를 다룬다. 본질적으로이 작업은 사용자가 선택한 언어를 다른 곳에서 사용할 수 있도록 저장소에 대한 작업 (일부 관련 데이터 - 언어가있는 사용자 지정 이벤트로 생각할 수 있음)을 실행합니다.

다른 구성 요소의 언어를 사용하려면 언어 선택을 Redux 저장소의 구성 요소 (이 경우 헤더)에 전달해야합니다.

이

여기

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

export default connect(mapStateToProps)(Header) 

당신은 가게에 소품에 값을 매핑하는 방법을 설명하는 기능, 가게에 머리글을 연결하는 ... 그 않는 헤더에 대한 관심의 코드를 당신의 반응 성분. state.active_language는 사용자가 선택한 언어가 저장되는 위치이며, 이것은 소품이 헤더 구성 요소에 active_language 전화로는 connect 기능의 더 높은 주문 구성 요소로 알고있는 것을 만들 것 장식이

전달 될 말하고있다 (HOC)는 본질적으로 소품이나 기능이 자동으로 주입되는 구성 요소입니다 (이 경우에는 매장에서 active_language 소품에 대해 자동으로 전달 된 값으로 장식 됨)

이 필요가있는 다른 구성 요소에 대해 동일한 작업을 수행 할 수 있습니다 언어 설정 또는 1-2 단계 더 진행

Inst 활성 언어 이름을 전달 EAD, 당신은이 정보와 함께 전달되는 구성 요소를 래핑 다른 HOC 쓰기 더 나은 아직 ...

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) 

를 해당 언어 자체를 전달하거나 ...

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)