L10N with effector.js

App.js

import {useLocalize, addTranslate} from './useLocalize'

addTranslate({
  lang: 'ru',
  translates: {
    greeting: 'Добро пожаловать, снова'
  }
});

export function App() {
  const { translate } = useLocalize();

  return <h1>{translate('greeting')}</h1>
}

useLocalize.js

import { createEvent, createStore } from 'effector';
import { useStore } from 'effector-react';

const $locales = createStore({});
const $language = createStore('ru');

export const addTranslate = createEvent();
const setLanguage = createEvent();

function replacer(translation, value) {
  return translation.replace(/{(.*?)}/g, (match, group) => value[group]);
}

// возвращает строку с переводом
// второй аргумент для замены шаблона {count} => 5
function translate(id, value) {
  const language = $language.getState();
  const locales = $locales.getState();
  if (value) return replacer(locales[language][id], value);
  return locales[language][id];
}

$locales.on(addTranslate, (state, payload) => ({
  ...state,
  [payload.lang]: { ...state[payload.lang], ...payload.translates }
}));

// set current language
$language.on(setLanguage, (_, payload) => payload);

export function useLocalize() {
  const language = useStore($language);
  const locales = useStore($locales);

  return { translate, setLanguage, language, locales };
}

$locales.watch(state => console.log('locales', state));