What is best practice to change language(localization) on fly with Modular/TCA ?

[RuslanARmore]

I need to add ability for user to change language without restarting the application. What is the best way to do this?
Should I user some global App state or something?

[mbrandonw]

Hi @RuslanARmore, you may not even need to involve TCA in this at all. You can change the language for your entire SwiftUI application using the \.locale environment value (see here).

Paste this into a playground to see how it works:

import PlaygroundSupport
import SwiftUI

struct ContentView: View {
  @State var locale = Locale.current
  @State var isPresented = false

  var body: some View {
    NavigationStack {
      VStack {
        Button {
          self.isPresented = true
          self.locale = Locale(identifier: "en")
        } label: {
          Text("English")
        }
        Button {
          self.isPresented = true
          self.locale = Locale(identifier: "zh")
        } label: {
          Text("Chinese")
        }
      }
      .alert("😁", isPresented: self.$isPresented) {}
    }
    .environment(\.locale, self.locale)
  }
}

PlaygroundPage.current.setLiveView(ContentView())

[nmccann]

Something to note is that (at least in my experience), the specified locale doesn't extend to system alerts (such as those asking for camera permission), and you also have to take special care to propagate the locale to sheets, your alerts etc. as SwiftUI doesn't seem to seem to persist environment values across those boundaries (while writing this, I found that at least as of the latest version of SwiftUI the locale does automatically carry over for native sheets, but didn't for a 3rd party popover library, so depending on your usage this may or may not be a concern).

For my project, I have an ObservableObject at the top level of my app which is passed into my SwiftUI hierarchy as an environment object. The first view in the SwiftUI hierarchy gets the locale from the ObservableObject and passes it into the environment of it's children via .environment(\.locale, \* get locale from environment object *\). The advantage of this approach is that I can then connect this to the TCA by providing a getter/setter as a dependency, and when the setter is called it updates my SwiftUI view hierarchy.

There is probably a better way to do this, but it works well enough for my use case, and allows both SwiftUI and TCA to be in agreement on the current locale (there are some cases where TCA needs to know this when calling some of it's dependencies).

A rough example is as follows (can't verify this works as is, and my project still uses a SceneDelegate rather than the new app lifecycle so there might be better ways to integrate it into that):

public class LanguageObserver: ObservableObject {
@Published var locale: Locale
}

// Add dependency for TCA
enum LanguageKey: DependencyKey {
  static let liveValue: () -> Void = {}
  static let testValue = {}
  static let previewValue = {}
}

enum UpdateLanguageKey: DependencyKey {
  static let liveValue: (Locale) -> Void = { _ in }
  static let testValue =  { _ in }
  static let previewValue =  { _ in }
}

extension DependencyValues {
// These could be unified into a single dependency, rather than separate closures if desired
  var language: () -> Void {
    get { self[LanguageKey.self] }
    set { self[LanguageKey.self] = newValue }
  }

  var updateLanguage: (Locale) -> Void {
    get { self[UpdateLanguageKey.self] }
    set { self[UpdateLanguageKey.self] = newValue }
  }
}

// Used like so:
let reducer = RootReducer()
  .dependency(\.language, { languageObserver.locale }) // TCA can access this to read the current locale
  .dependency(\.updateLanguage, { languageObserver.locale = $0}) // And this to change the current locale

let store = .init(initialState: \* some initial state *\, reducer: reducer)
let view = RootContainer(store: store).environmentObject(languageObserver)

// Where the views are defined as:
struct RootContainer: View {
  let store: Store<Root.State, Root.Action>
  @EnvironmentObject private var languageObserver: LanguageObserver

  var body: some View {
     ChildView().environment(\.locale, languageObserver.locale)
  }
}

struct ChildView: View {
  @State var isShowingSheet = false
  @Environment(\.locale) var locale

  var body: some View {
    VStack {
    Text("Some text that will be localized")
    SomeOtherView() // This child view will automatically inherit the locale of it's parent
    }
    .sheet(isPresented: $isShowingSheet) {
      // Forward this view's locale to presented views. Unlike "normal" child views, these might not automatically inherit the locale.
      ModalView().environment(\.locale, locale)
    }
  }
}

[RuslanARmore]

Thank you, guys!