React internationalization react-intl usage

npx create-react-app react-intl-demo  
npm i react-intl -S

import React, { useContext } from 'react'
import { IntlProvider } from 'react-intl' // Wrapped in the outermost layer of components that need language internationalization, just like react-redux's Provider, let components and subcomponents within components use the APIs and methods provided by react-intlimport { mainContext } from '../reducer' // Here we use useReducer to simply create one in the root directory to control the global state maintenance of the languageimport zh_CN from './cn' // Chinese packageimport en_US from './en' // English packageconst Inter = (props) => {
    // Get the default language settings. You can also use it in conjunction with some global state management such as redux Mobx or useReducer provided by react itself. const { state } = useContext(mainContext)
  const chooseLocale = (val) => { 
    let _val = val || navigator.language.split('_')[0]
    switch (_val) {
      case 'en':
        return en_US
      case 'zh':
        return zh_CN
      default:
        return zh_CN
    }
  }
  let locale = state.locale // Get locale
  let { children } = props
  // Wrap subcomponents to share react-intl's API to achieve multi-language return (
    <IntlProvider
      key={locale}
      locale={locale}
      defaultLocale='zh'
      messages={chooseLocale(locale)}
    >
      {children}
    </IntlProvider>
  )
}

export default Inter

const zh_CN = {
    start: 'Start',
    switch: 'switch'
  }
  export default zh_CN
  

const en_US = {
    start: 'start',
    switch: 'switch'
  }
  export default en_US
  

import React, { useReducer } from 'react'
const CHANGE_LOCALE = 'CHANGE_LOCALE'

const mainContext = React.createContext()

const reducer = (state, action) => {
  switch (action.type) {
    case CHANGE_LOCALE:
      return { ...state, locale: action.locale || 'zh' }
    default:
      return state
  }
}

const ContextProvider = (props) => {
  const [state, dispatch] = useReducer(reducer, {
    locale: 'zh'
  })
  return (
    <mainContext.Provider value={{ state, dispatch }}>
      {props.children}
    </mainContext.Provider>
  )
}

export { reducer, mainContext, ContextProvider }

import './App.css';
import { ContextProvider } from './reducer'
import Inter from './locale/intl'
import View from './views'

function App() {
  return (
    <ContextProvider>
      <Inter>
        <View />
      </Inter>
    </ContextProvider>
  );
}
export default App;

import react, { useContext} from 'react'
import { mainContext } from '../reducer'
import { FormattedMessage } from 'react-intl'
 
function Index() {
    const { dispatch, state } = useContext(mainContext)
    const { locale } = state
    const changeLang = () => { // Change the language in the state to switch dispatch({
            type: 'CHANGE_LOCALE',
            locale: locale === 'zh' ? 'en' : 'zh'
        })
    }
    return (
        <div>
           <div>
            <FormattedMessage id="start" ></FormattedMessage>
           </div>
           <div>
                <button onClick={changeLang} > <FormattedMessage id="switch" ></FormattedMessage></button>
           </div>
        </div>
    );
}
export default Index;