Reactjs、reducers、language switching

Question

私は新しいreactjsプロジェクトを引き継ぎました。言語の切り替えがどのように呼び出されたかを再検討しようとしています。

このように、この言語切り替えを行うフッターには2つのリンクがあります。

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

---

ok - ここではサービスと呼ばれる最初のページです。ここで最初に私を投げつけるのは、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

Reduxのアクションの作成者selectLanguageを呼び出すことで、現在の言語設定とフッターの部品を扱っています。本質的に、これはアクションをディスパッチします（これは、対応する一部のデータ（言語）を持つカスタムイベントと考えることができます）。

他のコンポーネントで言語を使用するには、その言語選択をReduxストアからコンポーネント（この場合はヘッダー）に渡す必要があります。

これは...ここ

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

export default connect(mapStateToProps)(Header) 

はあなたが店があなたに小道具に値をマッピングする方法を説明機能で、ストアにヘッダーを接続していることを行い、ヘッダに関心のあるコード反応する成分。 state.active_languageは、ユーザが選択した言語が格納されている場所であり、これは小道具があなたのヘッダーコンポーネントにactive_languageと呼ばれる通りにconnect機能はのは、高次成分として知っているものを作成しますデコレータがある

渡される語っています（本ケースでは店舗からのactive_language小道具の自動的に渡された値で装飾されている）

これを必要とする他のコンポーネントでも同じことができます言語設定、またはさらに1つまたは2つのステップを実行します。

Instアクティブな言語名を渡すのEAD、対応する言語そのものを渡す...

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)