Styjun

Is the beaming of this score following a vocal practice or it is just outdated and obscuring the beat?

Finish the Mastermind

Did WWII Japanese soldiers engage in cannibalism of their enemies?

Look mom! I made my own (Base 10) numeral system!

How do I explain to a team that the project they will work on for six months will 100% fail?

How to fix the following unexpected clipping path?

Is TA-ing worth the opportunity cost?

Plausibility of Ice Eaters in the Arctic

Is The Lion King live action film made in motion capture?

Does it make sense to occupy open space?

How to write "upright" integrals with automatic sizing

Generator for parity?

How to realistically deal with a shield user?

Does the United States guarantee any unique freedoms?

What are good ways to improve as a writer other than writing courses?

laravel create new project throws exception

How do I change the output voltage of the LM7805?

How does The Fools Guild make its money?

How to help new students accept function notation

Is it really ~648.69 km/s delta-v to "land" on the surface of the Sun?

How to translate this word-play with the word "bargain" into French?

In the movie Harry Potter and the Order or the Phoenix, why didn't Mr. Filch succeed to open the Room of Requirement if it's what he needed?

Egalitarian references in Chazal

Can an actual attack instead of a feint be used as the distraction for a Help action?

How to connect redux with I18n file to switch language according to redux state?

How can I upload files asynchronously?How do I include a JavaScript file in another JavaScript file?How to dispatch a Redux action with a timeout?How to reset the state of a Redux store?React/Redux: modified state is not updated in viewHow to export mapStateToProps and Redux Form?redux-persist v5: State not persisted in ASyncStoragemapping redux state to props not workingCan I bind store's state with a component in react-redux?How to convert React app to React-Redux app?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have used I18n.js library in react native to successfully change the language according to the defaultLocale choosed in I18n.js file.

But, the problem is when i used redux connect to perform state change, it gives me a lot of error ! I searched a library called react-redux-i18n but is there any way to solve this problem without using extra libraries ?

My I18n.js file :

 import I18n from "i18n-js";
 import en from "./locales/en";
 import tm from "./locales/tm";

 import connect from 'react-redux';

 I18n.fallbacks = true;
 I18n.defaultLocale = this.props.selectedLang === "English" ? 'en' :'tm';
 I18n.locale = this.props.selectedLang === "English" ? 'en' : 'tm';
 I18n.translations = 
 en,
 tm
 ;

 const mapStateToProps = (state) => 
 return 
 selectedLang: state.auth.selectedLanguage
 
 

 export default connect(mapStateToProps)(I18n);

How to perform this switch ? Please Help

javascript react-native redux internationalization

share|improve this question

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

add a comment | 

0

I have used I18n.js library in react native to successfully change the language according to the defaultLocale choosed in I18n.js file.

But, the problem is when i used redux connect to perform state change, it gives me a lot of error ! I searched a library called react-redux-i18n but is there any way to solve this problem without using extra libraries ?

My I18n.js file :

 import I18n from "i18n-js";
 import en from "./locales/en";
 import tm from "./locales/tm";

 import connect from 'react-redux';

 I18n.fallbacks = true;
 I18n.defaultLocale = this.props.selectedLang === "English" ? 'en' :'tm';
 I18n.locale = this.props.selectedLang === "English" ? 'en' : 'tm';
 I18n.translations = 
 en,
 tm
 ;

 const mapStateToProps = (state) => 
 return 
 selectedLang: state.auth.selectedLanguage
 
 

 export default connect(mapStateToProps)(I18n);

How to perform this switch ? Please Help

javascript react-native redux internationalization

share|improve this question

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

add a comment | 

I have used I18n.js library in react native to successfully change the language according to the defaultLocale choosed in I18n.js file.

But, the problem is when i used redux connect to perform state change, it gives me a lot of error ! I searched a library called react-redux-i18n but is there any way to solve this problem without using extra libraries ?

My I18n.js file :

 import I18n from "i18n-js";
 import en from "./locales/en";
 import tm from "./locales/tm";

 import connect from 'react-redux';

 I18n.fallbacks = true;
 I18n.defaultLocale = this.props.selectedLang === "English" ? 'en' :'tm';
 I18n.locale = this.props.selectedLang === "English" ? 'en' : 'tm';
 I18n.translations = 
 en,
 tm
 ;

 const mapStateToProps = (state) => 
 return 
 selectedLang: state.auth.selectedLanguage
 
 

 export default connect(mapStateToProps)(I18n);

How to perform this switch ? Please Help

javascript react-native redux internationalization

share|improve this question

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

 import I18n from "i18n-js";
 import en from "./locales/en";
 import tm from "./locales/tm";

 import connect from 'react-redux';

 I18n.fallbacks = true;
 I18n.defaultLocale = this.props.selectedLang === "English" ? 'en' :'tm';
 I18n.locale = this.props.selectedLang === "English" ? 'en' : 'tm';
 I18n.translations = 
 en,
 tm
 ;

 const mapStateToProps = (state) => 
 return 
 selectedLang: state.auth.selectedLanguage
 
 

 export default connect(mapStateToProps)(I18n);

share|improve this question

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

share|improve this question

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

asked Mar 27 at 6:56

Dazzile ProDazzile Pro

11377 bronze badges

1 Answer
1

active

oldest

votes

0

You will have a lot of issues if you try to set the initial language with redux. I recommend you to use AsyncStorage.

On language switch - store the selected language and update i18n:

handleChangeLanguage = async (lang) => 
 await AsyncStorage.setItem('lang', lang);

 const i18n = this.props;
 i18n.changeLanguage(lang);

On initial load of the application, check the AsyncStorage for preferred language:

 import i18n from 'i18next';
 import AsyncStorage from 'react-native';
 ....

 const languageDetector = 
 type: 'languageDetector',
 async: true,
 detect: async (cb) => 
 // Case 1: The user chose his preferred language setting.
 const preferredLang = await AsyncStorage.getItem('lang');
 if (preferredLang) 
 return cb(preferredLang);
 

 // Case 2: return the default language
 return cb('en');
 ,
 init: () => ,
 cacheUserLanguage: () => ,
;

i18n
 .use(languageDetector)
 .init(
 fallbackLng: 'en',
 react: 
 wait: true,
 ,
 );

share|improve this answer

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Understood, what if user want to change language from inside the app ? Like setting page -> change language ?
  
  – Dazzile Pro
  Mar 27 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @DazzilePro, handleChangeLanguage from my post is doing that -> it updates the newly selected language in AsyncStorage and updates the current i18n configuration. So, the next time when the user opens the application will use updated language from the AsyncStorage
  
  – Hristo Eftimov
  Mar 27 at 7:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I understand, it works on next time. What if there needs to be an live update, i am reloading or something which will change language when they changes and click on save language button !
  
  – Dazzile Pro
  Mar 27 at 7:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  And i am not using 'i18next' , just using pure i18n.js
  
  – Dazzile Pro
  Mar 27 at 7:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am not familiar with your pure i18n.js logic and I cannot help you :/ Maybe you need to rerender the component? But I recommend you to use react.i18next.com, it will save you a lot of problems, especially with complex translations like currencies, variables in the translations, etc
  
  – Hristo Eftimov
  Mar 27 at 7:54
  

  
  
  
  

 | 
show 8 more comments

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55371417%2fhow-to-connect-redux-with-i18n-file-to-switch-language-according-to-redux-state%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You will have a lot of issues if you try to set the initial language with redux. I recommend you to use AsyncStorage.

On language switch - store the selected language and update i18n:

handleChangeLanguage = async (lang) => 
 await AsyncStorage.setItem('lang', lang);

 const i18n = this.props;
 i18n.changeLanguage(lang);

On initial load of the application, check the AsyncStorage for preferred language:

 import i18n from 'i18next';
 import AsyncStorage from 'react-native';
 ....

 const languageDetector = 
 type: 'languageDetector',
 async: true,
 detect: async (cb) => 
 // Case 1: The user chose his preferred language setting.
 const preferredLang = await AsyncStorage.getItem('lang');
 if (preferredLang) 
 return cb(preferredLang);
 

 // Case 2: return the default language
 return cb('en');
 ,
 init: () => ,
 cacheUserLanguage: () => ,
;

i18n
 .use(languageDetector)
 .init(
 fallbackLng: 'en',
 react: 
 wait: true,
 ,
 );

share|improve this answer

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Understood, what if user want to change language from inside the app ? Like setting page -> change language ?
  
  – Dazzile Pro
  Mar 27 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @DazzilePro, handleChangeLanguage from my post is doing that -> it updates the newly selected language in AsyncStorage and updates the current i18n configuration. So, the next time when the user opens the application will use updated language from the AsyncStorage
  
  – Hristo Eftimov
  Mar 27 at 7:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I understand, it works on next time. What if there needs to be an live update, i am reloading or something which will change language when they changes and click on save language button !
  
  – Dazzile Pro
  Mar 27 at 7:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  And i am not using 'i18next' , just using pure i18n.js
  
  – Dazzile Pro
  Mar 27 at 7:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am not familiar with your pure i18n.js logic and I cannot help you :/ Maybe you need to rerender the component? But I recommend you to use react.i18next.com, it will save you a lot of problems, especially with complex translations like currencies, variables in the translations, etc
  
  – Hristo Eftimov
  Mar 27 at 7:54
  

  
  
  
  

 | 
show 8 more comments

0

You will have a lot of issues if you try to set the initial language with redux. I recommend you to use AsyncStorage.

On language switch - store the selected language and update i18n:

handleChangeLanguage = async (lang) => 
 await AsyncStorage.setItem('lang', lang);

 const i18n = this.props;
 i18n.changeLanguage(lang);

On initial load of the application, check the AsyncStorage for preferred language:

 import i18n from 'i18next';
 import AsyncStorage from 'react-native';
 ....

 const languageDetector = 
 type: 'languageDetector',
 async: true,
 detect: async (cb) => 
 // Case 1: The user chose his preferred language setting.
 const preferredLang = await AsyncStorage.getItem('lang');
 if (preferredLang) 
 return cb(preferredLang);
 

 // Case 2: return the default language
 return cb('en');
 ,
 init: () => ,
 cacheUserLanguage: () => ,
;

i18n
 .use(languageDetector)
 .init(
 fallbackLng: 'en',
 react: 
 wait: true,
 ,
 );

share|improve this answer

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Understood, what if user want to change language from inside the app ? Like setting page -> change language ?
  
  – Dazzile Pro
  Mar 27 at 7:45
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @DazzilePro, handleChangeLanguage from my post is doing that -> it updates the newly selected language in AsyncStorage and updates the current i18n configuration. So, the next time when the user opens the application will use updated language from the AsyncStorage
  
  – Hristo Eftimov
  Mar 27 at 7:48
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I understand, it works on next time. What if there needs to be an live update, i am reloading or something which will change language when they changes and click on save language button !
  
  – Dazzile Pro
  Mar 27 at 7:49
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  And i am not using 'i18next' , just using pure i18n.js
  
  – Dazzile Pro
  Mar 27 at 7:50
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am not familiar with your pure i18n.js logic and I cannot help you :/ Maybe you need to rerender the component? But I recommend you to use react.i18next.com, it will save you a lot of problems, especially with complex translations like currencies, variables in the translations, etc
  
  – Hristo Eftimov
  Mar 27 at 7:54
  

  
  
  
  

 | 
show 8 more comments

You will have a lot of issues if you try to set the initial language with redux. I recommend you to use AsyncStorage.

On language switch - store the selected language and update i18n:

handleChangeLanguage = async (lang) => 
 await AsyncStorage.setItem('lang', lang);

 const i18n = this.props;
 i18n.changeLanguage(lang);

On initial load of the application, check the AsyncStorage for preferred language:

 import i18n from 'i18next';
 import AsyncStorage from 'react-native';
 ....

 const languageDetector = 
 type: 'languageDetector',
 async: true,
 detect: async (cb) => 
 // Case 1: The user chose his preferred language setting.
 const preferredLang = await AsyncStorage.getItem('lang');
 if (preferredLang) 
 return cb(preferredLang);
 

 // Case 2: return the default language
 return cb('en');
 ,
 init: () => ,
 cacheUserLanguage: () => ,
;

i18n
 .use(languageDetector)
 .init(
 fallbackLng: 'en',
 react: 
 wait: true,
 ,
 );

share|improve this answer

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

handleChangeLanguage = async (lang) => 
 await AsyncStorage.setItem('lang', lang);

 const i18n = this.props;
 i18n.changeLanguage(lang);

 import i18n from 'i18next';
 import AsyncStorage from 'react-native';
 ....

 const languageDetector = 
 type: 'languageDetector',
 async: true,
 detect: async (cb) => 
 // Case 1: The user chose his preferred language setting.
 const preferredLang = await AsyncStorage.getItem('lang');
 if (preferredLang) 
 return cb(preferredLang);
 

 // Case 2: return the default language
 return cb('en');
 ,
 init: () => ,
 cacheUserLanguage: () => ,
;

i18n
 .use(languageDetector)
 .init(
 fallbackLng: 'en',
 react: 
 wait: true,
 ,
 );

share|improve this answer

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges

answered Mar 27 at 7:39

Hristo EftimovHristo Eftimov

5,17288 gold badges3535 silver badges5757 bronze badges