reactjs - 在 Redux 中间件中使用 React-intl 翻译的消息

Question

我在我的应用程序中支持多种语言，并为此使用 React-intl。我有 Redux 中间件，我可以在其中调用服务器，如果出现错误，我想在 UI 上显示错误。

我知道我可以做这样的事情:

1) 使用消息键从中间件调度一个操作:

{type: SHOW_ERROR, message: 'message_error_key'}

2) 在我的 React 组件中使用:

<FormattedMessage id={this.props.message_error_key}/>

但是有没有办法通过中间件已翻译的消息来调度操作？

{type: SHOW_ERROR, message: [translated_message_should_be_here]}

Answer 1

这可能不是最漂亮的解决方案，但我们是这样解决这个问题的；

1) 首先，我们创建了一个“IntlGlobalProvider”组件，它继承了组件树中 IntlProvider 的上下文和属性；

<ApolloProvider store={store} client={client}>
  <IntlProvider>
      <IntlGlobalProvider>
          <Router history={history} children={routes} />
      </IntlGlobalProvider>
  </IntlProvider>
</ApolloProvider>

2)(在 IntlGlobalProvider.js 内部)然后，我们从上下文中获取所需的 intl 功能，并通过单例公开它。

// NPM Modules
import { intlShape } from 'react-intl'

// ======================================================
// React intl passes the messages and format functions down the component
// tree using the 'context' scope. the injectIntl HOC basically takes these out
// of the context and injects them into the props of the component. To be able to 
// import this translation functionality as a module anywhere (and not just inside react components),
// this function inherits props & context from its parent and exports a singleton that'll 
// expose all that shizzle.
// ======================================================
var INTL
const IntlGlobalProvider = (props, context) => {
  INTL = context.intl
  return props.children
}

IntlGlobalProvider.contextTypes = {
  intl: intlShape.isRequired
}

// ======================================================
// Class that exposes translations
// ======================================================
var instance
class IntlTranslator {
  // Singleton
  constructor() {
    if (!instance) {
      instance = this;
    }
    return instance;
  }

  // ------------------------------------
  // Formatting Functions
  // ------------------------------------
  formatMessage (message, values) {
    return INTL.formatMessage(message, values)
  }
}

export const intl = new IntlTranslator()
export default IntlGlobalProvider

3) 将其作为模块导入到任何地方

import { defineMessages } from 'react-intl'
import { intl } from 'modules/core/IntlGlobalProvider'

const intlStrings = defineMessages({
  translation: {
    id: 'myid',
    defaultMessage: 'Hey there',
    description: 'someStuff'
  },

intl.formatMessage(intlStrings.translation)