React-RouterとReact-Intl：翻訳のルートを動的に読み込むためのより良い方法はありますか？

Question

私は、ルートの変更時にページの翻訳を動的に読み込みます。私は各ルートに対してonEnterを使って行った。

これを実装するより良い方法はありますか？各ルートにonEnterコールバック関数を使用することを避けることはできますか？

var Root = React.createClass({  
    baseTranslations : {}, 

    getInitialState: function(){  
     return { 
      lang: 'it', 
      translations: null, 
     };  
    },  

    componentWillMount: function() {  
     // load the common translation for all routes    
     this.setState({ 
      lang: this.getLocale().lang 
     }); 
     this.loadTranslation("base"); 
    }, 

    onChangeRoute: function(nextState, replace){ 
     // load the specific route's translation 
     this.loadTranslation(nextState.location.pathname); 
    }, 

    getLocale: function(what){ 
     // return lang and user region (ex: it-IT)  
    }, 

    loadTranslation: function(route){  
     var lcl = route;  
     var mapping = { 
      '/'  : 'home', 
      'auth' : 'dashboard' 
     }; 

     if(route in mapping){ 
      lcl = mapping[route]; 
     } 

     $.ajax({ 
      url: './locales/' + this.state.lang +'/' + lcl + '.json', 
      dataType: "text", 
     }).done(function(res) { 

      if(lcl === "base"){ 
       this.baseTranslations = JSON.parse(res); 
      } 

      this.setState({ 
       translations: $.extend(true, this.baseTranslations, JSON.parse(res)) 
      }); 

     }.bind(this)); 

    }, 

    render: function() { 
     var children; 

     if (this.state.translations) { 
      children = (
       <IntlProvider locale={this.state.lang} messages={this.state.translations}> 
        <Router history={browserHistory}> 
         <Route path="/" component={App}> 
          <IndexRoute component={Home}/> 

          <Route path="signup" onEnter={this.onChangeRoute} getComponents={(location, cb) => { 

           require.ensure([], (require) => { 
             cb(null, require('./components/Signup.jsx')) 
           }, "Signup") 

          }} />  

          <Route path="*" component={NoMatch}/> 
         </Route> 
        </Router> 
       </IntlProvider> 
      ); 
     } 

     return <div>{children}</div>; 
    } 
}); 


ReactDOM.render(
    <Root/>, 
    document.getElementById('rct-cont') 
); 

Answer 1

それはあなたが使用しようとしているフラックスの実装と言うのは難しいように、私はあなたの擬似コードを与えるだろうし、代わりにここで重要なアイデア：

i18nActions

• loadLanguage(language, route) - もし指定されたルートの言語がロードされていない場合、これはクエリをトリガし、その結果をストアに委譲します。
• 必要に応じてここにキャッシングレイヤー（localStorage）を実装できます。あなたは無効に注意する必要があります。データが古くなり、リフレッシュする必要があることを伝えるための方法が必要です。 i18nStore

  は、ユーザに見えるI18N状態を維持します。 UIレベルのコンポーネントからこの状態を消費します。 onEnterで

ルート

• トリガーloadLanguageストアを更新します。
• ストアを消費し、データをIntlProviderに渡します。他のコンポーネントは、そのコンテキストからi18nデータを掘り下げることができます。

---

翻訳がロードしている間、何をするかのような追加の質問があります。あなたはそれから何を見せるべきですか？ユーザーにUIを表示することを延期するか、データが受信されると置換されるプレースホルダを使用することができます。