React - własne podejście do tłumaczeń.

Question

Hej mam problem który nie wiem jak rozwiązać. Zaprojektowałem sobie system tłumaczeń na 2 komponentach. Posiadam TranslateProvider który przetrzymuje obiekt z tłumaczeniami i udostępnia go przez context oraz Translate który wyświetla tłumaczenie z obiektu który jest w context.

W skrócie działa to tak: 

<TranslateProvider lang={name:'Imie'}>
    <Translate key="name" />
</TranslateProvider>

Jestem bardzo zadowolony z działania tego systemu lecz muszę dodać możliwość pobrania tłumaczenia poprzez funkcje. Potrzebuje tego ponieważ niektóre komponenty wymagają przekazania już przetłumaczonego stringa i nie mogę użyć wówczas komponentu Translate. Chodzi o to aby wprawić w działanie taki kod i stworzyć funkcje translate która pobierze context.

<TranslateProvider lang={name:'Imie'}>
    { translate('name'); /* co zrobić aby zadziałało ?*/}
</TranslateProvider>

 

Answer 1

jeśli używasz komponentu <Translate > do wyświetlania to jest to błędne podejście, komponenty powinny być  jako "pure fuction" gdzie przekazujesz tylko tekst do wyświetlenia, który otrzymujesz z funkcji.

czego używasz do zarządzania stanem aplikacji? Redux?

Musisz stworzyć oddzielny plik gdzie trzymasz obiekty z tlumaczeniami który ma funkcje np

translate(enum language, string key)

<TranslateProvider > jest zbędny

Comments

W głównej aplikacji używam reduxa lecz TranslateProvider i Translate mam w osobnym repo jako "react-components". Jak rozumiem najlepiej zrobić to poprzez reduxa i pozbyć się jednego i drugiego komponentu? Reduxa postrzegam bardziej jako stan który się zmienia i wpływa na całą aplikacje. Języki to bardziej stałe niz zmienne dlatego też nie zdecydowałem się na reduxa. W jaki sposób najzgrabniej napisałbyś funkcje która będzie znała mojego stora? Mi przychodzi tylko jeden sposób a mianowicie zrobić osobny moduł i do niego wstrzyknąć store jakimś setterem. Chciałbym korzystać z języków w wygodny sposób bez mapowania statów i innych magi.

---

Jednego nie jestem pewien, czy to tłumaczenie działa na zasadzie "google translator"? Czy jest to po prostu aplikacja dostępna w kilku językach? Jeśli tak to nie jest to tłumaczenie a bardziej i18n(internationalization). Komponenty nie powinny być świadome stanu języka aplikacji tylko wyświetlać dany im tekst. Opisz mi cały kontekst użycia ich w aplikacji. Zarządzanie językiem na poziomie komponentów mija sie z celem używania ich.

---

Jest to aplikacja dostępna w kilku językach. Logikę wybierania języka mam poza React a całą moją aplikacje otaczam TranslateProvider em który dostaje już wybrany wcześniej obiekt z tłumaczeniami. TranslateProvider nie wie jaki to język wie jedynie jakie są wartości kluczy. 

<TranslateProvider lang={name:'Imie', klucz2: 'wartosc2'}>
    <App />
</TranslateProvider>

Następnie wszędzie gdzie potrzebuje tekstu z wybranego klucza umieszczam tylko Wywołanie  drugiego komponentu

<Translate key="klucz2" />

 

---

Ok, to teraz rozumiem dlaczego używasz contextu. Możesz np exportowac funkcje translate() i klase <TranslateProvider > z jednego modułu, jeśli już chcesz to robić w ten sposób.

Czyli gdzie masz  ta logikę wybierania języka?

Możesz po prostu zapisać wartość tego obiektu i mieć funkcje 

let lang={name:'Imie', klucz2: 'wartosc2'}

string translate(string klucz) {

return lang[klucz]  //jesli istnieje

}

 

Answer 2

Czy masz dostęp do komponentu translate?

Możesz w komponentcie roota wykonać operacje translate i przekazać wynik jako prop.

Comments

Sam napisałem komponenty TranslateProvider i Translate. Nie rozumiem co masz na myśli mówiąc o dostępie do komponentu? Możesz dać jakiś przykład?

---

Nie są z jakieś paczki :).