咨询：无需Redux能否实现Locale动态切换并触发应用重渲染

Absolutely! You don’t need Redux to pull off dynamic locale switching with re-renders in your React app. Let’s walk through how to do this using just React’s built-in state management and context (if needed for deeper components).

1. Refactor Your Root Component #

The key is to move the IntlProvider into a stateful component (class or functional) so you can update the locale and messages values dynamically. Here’s how to adjust your initial setup with a functional component:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';
import { Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const Root = () => {
  // Initialize state with your existing window values
  const [locale, setLocale] = useState(window.locale);
  const [messages, setMessages] = useState(window.messages);

  // Define a method to switch locales (fetch new messages as needed)
  const switchLocale = async (newLocale) => {
    // Example: Fetch message JSON from your server/local files
    const newMessages = await fetch(`/locales/${newLocale}.json`)
      .then(res => res.json());
    
    // Update state to trigger re-render
    setLocale(newLocale);
    setMessages(newMessages);
    
    // Optional: Sync with window object to keep global consistency
    window.locale = newLocale;
    window.messages = newMessages;
  };

  return (
    <IntlProvider locale={locale} messages={messages}>
      <Router history={history}>
        {/* Pass the switch method down to your App */}
        <App switchLocale={switchLocale} />
      </Router>
    </IntlProvider>
  );
};

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

If you’re using a class component (for older React versions), here’s the equivalent:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { IntlProvider } from 'react-intl';
import { Router } from 'react-router-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

class Root extends Component {
  state = {
    locale: window.locale,
    messages: window.messages
  };

  switchLocale = async (newLocale) => {
    const newMessages = await fetch(`/locales/${newLocale}.json`)
      .then(res => res.json());
    
    this.setState({
      locale: newLocale,
      messages: newMessages
    });

    window.locale = newLocale;
    window.messages = newMessages;
  };

  render() {
    const { locale, messages } = this.state;
    return (
      <IntlProvider locale={locale} messages={messages}>
        <Router history={history}>
          <App switchLocale={this.switchLocale} />
        </Router>
      </IntlProvider>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('root'));
registerServiceWorker();

2. Trigger Locale Switch in Child Components #

Now you can call the switchLocale method from any child component that receives it via props. For example, in your App component:

// App.js
import React from 'react';

const App = ({ switchLocale }) => {
  return (
    <div className="app">
      {/* Language toggle buttons */}
      <button onClick={() => switchLocale('en')}>English</button>
      <button onClick={() => switchLocale('fr')}>Français</button>
      <button onClick={() => switchLocale('es')}>Español</button>

      {/* Rest of your app content */}
    </div>
  );
};

export default App;

3. Avoid Props Drilling (Optional) #

If you need to access the switchLocale method in deep nested components, use React Context instead of passing props through every level. Here’s a quick implementation:

First, create a context:

// LocaleContext.js
import React, { createContext, useContext } from 'react';

const LocaleContext = createContext();

export const LocaleProvider = ({ children, locale, messages, switchLocale }) => {
  return (
    <LocaleContext.Provider value={{ locale, messages, switchLocale }}>
      {children}
    </LocaleContext.Provider>
  );
};

export const useLocale = () => useContext(LocaleContext);

Then update your Root component to wrap the app with the context provider:

// Root.js
import { LocaleProvider } from './LocaleContext';

// ... inside the Root component's return
return (
  <IntlProvider locale={locale} messages={messages}>
    <LocaleProvider 
      locale={locale} 
      messages={messages} 
      switchLocale={switchLocale}
    >
      <Router history={history}>
        <App />
      </Router>
    </LocaleProvider>
  </IntlProvider>
);

Now in any deep component, you can use the hook to access the switch method:

// SomeDeepNestedComponent.js
import React from 'react';
import { useLocale } from './LocaleContext';

const SomeDeepNestedComponent = () => {
  const { switchLocale } = useLocale();
  
  return (
    <button onClick={() => switchLocale('de')}>Deutsch</button>
  );
};

export default SomeDeepNestedComponent;

Why This Works #

When you update the locale or messages state in the root component, the IntlProvider re-renders with the new values. All components that consume the internationalization context (via useIntl, FormattedMessage, etc.) will automatically re-render to display the new language content—no Redux required.

内容的提问来源于stack exchange，提问作者gouletf