title: React / Redux and Multilingual (Internationalization) Apps - Architecture
body: <p>I'm building an app that will need to be available in multiple languages and locales.</p>
  
  <p>My question is not purely technical, but rather about the architecture, and the patterns that people are actually using in production to solve this problem.
  I couldn't find anywhere any "cookbook" for that, so I'm turning to my favourite Q/A website :)</p>
  
  <p>Here are my requirements (they are really "standard"):</p>
  
  <ul>
  <li>The user can choose the language (trivial)</li>
  <li>Upon changing the language, the interface should translate automatically to the new selected language</li>
  <li>I'm not too worried about formatting numbers, dates etc. at the moment, I want a simple solution to just translate strings</li>
  </ul>
  
  <p>Here are the possible solutions I could think off:</p>
  
  <p><strong>Each component deal with translation in isolation</strong></p>
  
  <p>This means that each component have for example a set of en.json, fr.json etc. files alongside it with the translated strings. And a helper function to help reading the values from those depending on the selected language.</p>
  
  <ul>
  <li>Pro: more respectful of the React philosophy, each component is "standalone"</li>
  <li>Cons: you can't centralize all the translations in a file (to have someone else add a new language for example)</li>
  <li>Cons: you still need to pass the current language as a prop, in every bloody component and their children</li>
  </ul>
  
  <p><strong>Each component receives the translations via the props</strong></p>
  
  <p>So they are not aware of the current language, they just take a list of strings as props which happen to match the current language</p>
  
  <ul>
  <li>Pro: since those strings are coming "from the top", they can be centralized somewhere</li>
  <li>Cons: Each component is now tied into the translation system, you can't just re-use one, you need to specify the correct strings every time</li>
  </ul>
  
  <p><strong>You bypass the props a bit and possibly use the <a href="https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html">context</a> thingy to pass down the current language</strong></p>
  
  <ul>
  <li>Pro: it's mostly transparent, don't have to pass the current language and/or translations via props all the time</li>
  <li>Cons: it looks cumbersome to use</li>
  </ul>
  
  <p>If you have any other idea, please do say!</p>
  
  <p>How do you do it?</p>