initialize() and setActiveLanguage() take some time

[robfuscator]

I need to fetch data via REST API according to the active language.

When I set the language using the standard Toggle component from the docs, and right after that send a query (parametrized using activeLanguage.code) to the API, the old language still applies. It seems like setActiveLanguage() (and intialize() as well) takes a little time to finish and works async.

It would be great if there was either some way to determine when these methods finisch their jobs (may something like a JS Promise) or if you could tell them to run synchronously.

I'm using react 16.8.6 and react-localize-redux 3.5.2

I hope I didn't miss something very basic.

[ryandrewjohnson]

Without a working example there is not much I can do to help on this one. If you can create a working example in https://codesandbox.io that reproduces the issue I will be able to better help you.

[robfuscator]

Sadly I don't have that much time right now. But simply put I have a class component, where I initialize your library using the initialize() method. When I log the activeLanguage prop every time my component gets rendered, the first log is always undefined while every following log correctly shows the activeLanguage object.

[Myreage]

Hey I have quite the same problem with addTranslation, here's my use case :

I'm loading several translation files with get requests, use addTranslation for each of them, then set translationsLoaded to true when it's all done.

Sadly, translationsLoaded is set to true before the translations are added.

const transLoading = filesTranslationBrand.map((fileTranslation) => {
          axios.get(remote_translate_files_url)
            .then(res => { this.props.addTranslation(res.data); }) 
            .catch(err => { console.log(err); });           
        })
Promise.all(transLoading).then(() => this.setState({translationsLoaded:true}))             

[louis-jaris]

I have the same issue than @Myreage here, I've split my translations into several files that are being fetched. I have some translation id missing during 1 seconde or less. Can't you provide anything that will help us to avoid this missing id?
Thx

[ryandrewjohnson]

@louis-jaris @Myreage same applies...

Without a working example there is not much I can do to help on this one. If you can create a working example in https://codesandbox.io that reproduces the issue I will be able to better help you.

Also I'm very busy right now, so if either of you can submit a PR with a fix that'd be greatly appreciated as well.

[subharb]

Hello, I've set a working example, https://codesandbox.io/s/gracious-fast-w3tvo?file=/src/App.js

Not sure if its a bug, but if I set the language in the constructor of the component, this change is not yet transmitted when the "componentDidMount" is ran. I would need the value to be updated since that is where I call the server for texts in that language.
I set the language in the constructor because I get the language via the URL, so the very first thing I want to do is to set the language of react-localize-redux to that one.

If it's not a bug, is there another way to do this?

[ryandrewjohnson]

@subharb for initial page load you would just determine the language based on url and then pass that language to LocalizeProvider as default language. That way when you app is initialized you'll have the correct language when your app first mounts.

The thing to keep in mind about executing logic in the constructor is that the logic on the client side will be executed as soon as that file is imported into your App. It will also be executed if doing server side rendering.