How to use i18next with mobx-state-tree?

[OnkelTem]

I can't figure out how to use i18next inside my models in React.
And I didn't find anything about this neither in Issues, nor in Discussions or the docs.

Probably the React approach (i18next-react) cannot be used here.

import { types } from 'mobx-state-tree'
import { useTranslation } from 'react-i18next'

import './App.css'
import './i18n'
import { observer } from 'mobx-react-lite'
import { useEffect } from 'react'

const fooModel = types
  .model({
    name: types.string,    
  })
  .views((self) => ({
    get nameField() {
      return {
        label: 'Name', // Here I need to use t('name'), but I don't know how to get it.
        value: self.name,
      }
    },
  }))

...

function App() {
  const { t, i18n } = useTranslation()
  useEffect(() => {
    console.log('New t')
    // Here we need to update the t-function in store (granted we have it there...), but I'm not sure how.
    // ?
  }, [t])
  return (
    <>
      <div>
        <strong>{foo1.nameField.label}</strong>: <span>{foo1.nameField.value}</span>
      </div>
    </>
  )
}

export default observer(App)

I thought about using getEnv as shown in DI docs but how to update it?

The volatile state doesn't seem to be working as well, because it's not clear how to transfer it from actions to views.

const fooModel = types
  .model({
    name: types.string,
    t: 
  })
  .views((self) => ({
    get nameField() {
      return {
        label: 'Name',
        value: self.name,
      }
    },
  })).actions((self) => {
    let _t
    return {
      setT(t: TFunction) {
        _t = t // Then how to get it in the views?
      }
    }
  })

I'm out of ideas.

[OnkelTem]

Seems like we could make a mobx store around the i18next core stuff.
Make it then reactive.
And use it in MST stores.

I'm sure someone should have already solved this task.

[OnkelTem]

Found a similar question on StackOverflow of 2018: https://stackoverflow.com/questions/49195654/any-advice-to-use-mobx-with-i18n-internationalization-in-my-react-js-app

Seems like this simple approach would work:

import i18next, { TFunction } from 'i18next'
import { observable, runInAction } from 'mobx'

export const i18nStore = observable({
  t: i18next.t,
} as { t: TFunction })

function changeLanguage(lng: string) {
  i18next.changeLanguage(lng)
  runInAction(() => {
    i18nStore.t = i18next.getFixedT(lng)
  })
}

const fooModel = types
  .model({
    name: types.string,
  })
  .views((self) => {
    const i = i18nStore
    return {
      get nameField() {
        return {
          label: i.t('name'),
          value: self.name,
        }
      },
    }
  })

const foo1 = fooModel.create({ name: 'FOO' })

const languages = {
  en: 'English',
  fr: 'Francais',
}

function App() {
  const { t, i18n } = useTranslation()
  return (
    <>
      <div>
        {Object.entries(languages).map(([key, value]) => (
          <button
            type="submit"
            key={key}
            onClick={() => changeLanguage(key)} // Using our custom function
            disabled={i18n.resolvedLanguage === key}
          >
            {value}
          </button>
        ))}
      </div>
      {t('text')}
      <div>
        <strong>{foo1.nameField.label}</strong>: <span>{foo1.nameField.value}</span>
      </div>
    </>
  )
}

As I was expecting, React is not needed here.

P.S. Why React? Seriously, we're in the process of removing all the logic from all the components. We now make components - properties of observable classes/mst. Once we finish, React will be just a renderer. And we can switch to something else - preact? Custom renderer?