React-Router ve React-Intl: Çevirinin rotasını dinamik olarak yüklemek için daha iyi bir yol var mı?

Question

Rota değiştiğinde sayfanın çevirisini dinamik olarak yüklerim. Her rota için onEnter kullanarak yaptım.

Bunu uygulamak için daha iyi bir yolu var mı? Her rota için geri arama fonksiyonunu kullanmaktan kaçınabilir miyim?

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

bunu kullanacağız hangi Akı uygulanması söylemek zor gibi, sana pseudocode vereceğiz ve bunun yerine Buradaki anahtar fikirler:

i18nActions

• loadLanguage(language, route) - Eğer Verilen rota için bir dil yüklenmemiş, bu bir sorguyu tetikler ve ardından sonucu mağazaya atar.
• İsterseniz bir önbellek katmanı burada uygulayabilirsiniz (localStorage). Yine de, uyumsuzluğa dikkat etmelisin. Verilerin eski haline geldiğini ve yenilenmesi gerektiğini söyleyen bir yolun olması gerekir. i18nStore

  kullanıcıya görünür i18n durumunu korur. Bu durumu UI düzeyindeki bileşenlerden tüketirsiniz. onEnter de

Kök

• Tetikleyiciler loadLanguage mağaza güncellemek için.
• Depoyu tüketir ve verileri IntlProvider'a iletir. Diğer bileşenler bu bağlamdaki i18n verilerini kazabilir.

---

çevirileri yüklenirken ne gibi ek soru vardır. Ne göstermelisin o zaman? Kullanıcı arayüzünü kullanıcıya göstermeyi erteleyebilir veya verilerin alınmasından sonra değiştirilecek yer tutucuları kullanabilirsiniz.