Sposoby przygotowania słowników języków dla aplikacji [React, TS]

Question

Cześć,

Założenie pierwotne:
Aplikacja ma możliwość przełączania się pomiędzy językami, np. ang / de / pl. Jest pisana w react. Używam Redux do zarządzania stanami globalnymi aplikacji.

Moje rozwiązanie:
Póki co budowałem aplikację, tak że przygotowałem sobie zmienną `localeIso` trzymaną w store od Redux i przygotowałem obiekty słowników podzielone na moduły (podstrony) aplikacji. W komponentach podłączałem teksty, jako referencje do tych słowników, a język pobierałem z wspomnianego localeIso. Więc sobie przerenderowuję komponenty, gdy była taka potrzeba - zmiana języka. Przykładowo:

export const DevicesModuleDictionary: IDictionary<IDevicesModuleLanguage> = {
  pl: { module: 'Urządzenia' },
  en: { module: 'Devices' },
}

import { DevicesModuleDictionary as Dictionary } from '../../../../constants/dictionary/modules/devicesModule'

const Component = (): JSX.Element => {
  const localeIso: ILocaleIso = useAppSelector(getLocaleIso) //ILocaleIso to: 'pl' | 'en'

  return <>{Dictionary[localeIso].module}</>
}

export default Component

Nowe założenie:
No i takie moje rozwiązanie działa w porządku, jedynie problem jest taki, że pojawił się wymóg, że edytować i rozszerzać o nowe języki ma osoba, która nie potrafi i nie ma się uczyć programować. Więc kształt nawet JSON odpada :(.

Podsumowanie - pytanie:
I tu pojawia się moje pytanie, w jaki sposób Wy przygotowujecie pliki ze słownikami, z których aplikacja czyta teksty i wyświetla na podstawie wybranego języka? Macie jakieś godne polecenia rozwiązania, tak żeby potem nietechniczne osoby mogły modyfikować treści? A może są w ogóle standardy na to i poniosła mnie zbytnio kreatywna wyobraźnia przy moim rozwiązaniu?

W tym momencie myślę, czy nie wyrzucić obiektów moich słowników do JSON i czytać z nich zamiast obiektów JS (chyba nie będzie problemu, bo stringi będą bundlowane jako osobny plik, zamiast w index.js?). Wówczas osoba odpowiadająca za zawartość słowników mogłaby sobie pisać w Excel i potem użyć jakiegoś gotowego rozwiązania do konwersji na JSON. Tylko musiałby tworzyć strikte o kształcie moich obiektów. Wiem, że są takie konwertery, ale nigdy nie używałem i nie wiem co mogę się spodziewać - czy nie skończy się na pisaniu customowego, żeby dopasować obiekty.

Waszym zdaniem warto iść w takie rozwiązanie, czy może znacie lepsze? Macie jakie rady lub sugestie? :)

 

Z góry dziękuję.

Answer 1

W moim odczuciu w redux powinieneś mieć zapisany tylko obecnie wykorzystywany język. A sam język trzymać w osobnym kontekście. Nie ma sensu raczej łączyć tego i wykonywać w wielu miejscach selektory podczas update czegokolwiek w store.

Co do zarzadzaniami tłumaczeniami przez osoby nie techniczne to może jakaś zewnętrzna usługa? Ja korzystałem z tego : https://locize.com/ Panel pod względem wyglądu i UX okropny ale samo narzędzie tanie ;D Każdy ma wjazd do panelu admina a ty po stronie FE możesz sobie pobrać dane w różnych formatach np JSON.

Jeśli jednak wolisz zrobić całość małym nakładem pracy to podpowiem że pliki JSON są traktowane jak JS i możesz je pobierać poprzez składnie import lub required. Gdy wczytujesz pliki JSON poprzez required masz pełne typowanie wczytanego obiektu co jest ekstra :D

Comments

W moim odczuciu w redux powinieneś mieć zapisany tylko obecnie wykorzystywany język.

Znaczy tak jest :) w store mam tylko string localeIso, który jest 'en' lub 'pl'. Same obiekty słowników aktualnie to zwykłe eksportowane consty z plików, które zawierają tylko i wyłącznie je. Stąd pomysł przejścia na json, bo tak naprawdę to "prawie to samo".

Nie ma sensu raczej łączyć tego i wykonywać w wielu miejscach selektory podczas update czegokolwiek w store.

Znaczy selektory są tylko po to, żeby odświeżyć komponenty i podmienić teksty (no bez przerenenderowania się nie uda), w których słownictwo się zmienia. Mógłbym odświeżyć całą stronę od razu i zaktualizować napisy, ale to trochę niezgodne z ideą Reacta mi się wydaje.

Jeśli jednak wolisz zrobić całość małym nakładem pracy to podpowiem że pliki JSON są traktowane jak JS i możesz je pobierać poprzez składnie import lub required. Gdy wczytujesz pliki JSON poprzez required masz pełne typowanie wczytanego obiektu co jest ekstra :D

Właśnie wiem i stąd pierwsza taka myśl ;). I chyba na to się zdecyduję, a ostatecznie napiszę sam prosty konwerter w nodejs dla nietechnicznego tłumacza. Z tym require mnie zaskoczyłeś, to brzmi jak przy import miałoby nie zadziałać typowanie z jsona?

A żeby zoptymalizować ilość pobieranych danych to spróbuje dać lazy na importach tych jsonów - słowników. Chociaż nie korzystałem z tego jeszcze nigdy i może moja wiedza się różnić od rzeczywistości, że to po prostu opakowanie importu w lazy().