How to change language based of mobx/redux?

I am using i18n to supply translations to my project, currently it will translate based on browser language. I want it to instead of that change the language based on a property in a mobx store.

I have tried looking into react-mobx-i18n, and it seems like a bad solution. Because I would have to annotate every single component as translatable and restructure everything.

I am using a file for each language, so far I have four languages

import i18n from 'i18next'
import en from './en.json'
import fr from './fr.json'

i18n
    .init({
        fallbackLng: 'en',
        resources: {
        en: 
        },
        ns: ['application'],
        defaultNS: 'application',
        en: en,
        fr: fr
        react: {
            wait: true,
        },
    })

export default i18n

here is the render of my App.js

import React, { Component } from 'react';
import { I18nextProvider } from 'react-i18next'
import i18n from './i18n'
import { Provider } from 'mobx-react'

export default class App extends Component {

 render() {

        return (
            <Provider {...this.props.stores}> //mobx stores
                <I18nextProvider i18n={i18n}> 
                //router want to change mobx-state and rerender everything with a new language
                </I18nextProvider>
            </Provider>
        )
    }
}

en.json

{ 
  "application" :  {
     "hello": "hello"
  }
}

fr.json

{ 
  "application" :  {
     "hello": "bonjour"
  }
}

I would like to somehow make i18n subscribe to my mobx state and update when a new language is detected. Should this be impossible, then I would like to write a handler in a store to change the language based on some input.

[adrai]

Can you try to just require/import your i18n file and call the changeLanguage function from wherever you want?

[jamuhl]

@sanketdeshmukh19 https://github.com/i18next/react-i18next/issues/924