Gatsby redux ttag integration problem

[miltonbolonha]

This is my repo: https://github.com/bolonhadev/my-gosh-dev

In './src/components/subscribe.js', I'm sending a 'dispatch function' (redux), called 'CHANGE_TO_PT' && 'CHANGE_TO_EN'. This is buttons to change language.

That function calls './stc/states/Languages/reducer', I'm trying to use 'addLocale()' and 'useLocale()'. The paramns to these functions are well. I'm using the right params like 'language' and 'i18n/${myLanguage}.po.json'.

But the site doesn't change the language. What do I have to do to fix this ?

[AlexMost]

Hi @bolonhadev. This happens because React is not aware of this change. useLocale sets language inside ttag library, so every new call of t will search translations in a different language. For now the best option is to force rerender of the whole app, or even reload the whole page with the new language setting.

[miltonbolonha]

Hi @AlexMost , thank you. I don't want to reload the whole page.

My new try it's to putting this function in a redux-saga action, but this gives me that warning "useLocale" is neither a React function component or a custom React Hook function.

I still don't know how to rerender the whole thing, or fixing this React Hook warning.

[dimaqq]

import {addLocale, useLocale as use_locale} from "ttag";

... onClick={() => use_locale("fi")} ...

P.S. the collision between ttag API and react hook naming convention is unfortunate and IMO ttag needs to provide a neutral alias.

[eckertalex]

I agree with @dimaqq we should provider a neutral alias.

I think this issue can be closed now @AlexMost

[dimaqq]

Re "not a hook":

For a concrete proposal: how about calling it setLocale instead?

It could be as simple as export const setLocale = useLocale; and a note in documentation?

[miltonbolonha]

Tks for sharing your answers.