Utilizzare i messaggi tradotti React-intl nel middleware Redux

Question

Supplico diverse lingue nella mia applicazione e utilizzo React-intl per questo. Ho il middleware Redux dove faccio una chiamata al server e in caso di errore voglio mostrare un errore sull'interfaccia utente.

so che posso fare qualcosa di simile:

1) inviare un'azione dal middleware con una chiave un messaggio:

{type: SHOW_ERROR, message: 'message_error_key'} 

2) nel mio Reagire uso componente:

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

Ma c'è un modo per inviare un'azione con il messaggio già tradotto dal middleware?

{type: SHOW_ERROR, message: [translated_message_should_be_here]} 

Answer 1

non credo che si può accedere direttamente dal formatMessage middleware perché sembra esposta solo ai componenti tramite injectIntl. Probabilmente puoi presentare un problema per descrivere il tuo caso d'uso, e forse una semplice API JavaScript per accedere a formatMessage() al di fuori dei componenti verrà considerata, ma non sembra disponibile ora.

Answer 2

Mi sono imbattuto in un problema simile quando provavo a inizializzare lo stato di default di un riduttore in messaggi localizzati. Sembra che l'utilizzo di qualsiasi parte di react-intl al di fuori dei componenti non sia nulla che sia stato considerato nell'API. Due idee:

1. Iniettare intl in un componente personalizzato sotto <IntlProvider> che lo rende disponibile in componentWillReceiveProps attraverso un Singleton a livello di applicazione. Prossimo accesso che singleton da altrove e utilizzare intl.formatMessage e altri.

2. È possibile utilizzare i componenti di cui fa parte React-intl per implementare la funzionalità richiesta. In questo caso è possibile prendere in considerazione yahoo/intl-messageformat e yahoo/intl-format-cache. Questo naturalmente non si integrerebbe bene con react-intl out of the box.