Use React-intl translated messages in Redux middleware

Question

I support several languages in my application and use React-intl for this. I have the Redux middleware where I make a call to the server and in the case of error I want to show an error on the UI.

I know that I can do something like:

1) dispatch an action from middleware with a message key:

{type: SHOW_ERROR, message: 'message_error_key'}

2) in my React component use:

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

But is there a way to dispatch an action with already translated message from middleware?

{type: SHOW_ERROR, message: [translated_message_should_be_here]}

Pulp

Answer 1

It might not be the prettiest solution, but here's how we solved this problem;

1) First we created a 'IntlGlobalProvider' component that inherits the context and props from the IntlProvider in our component tree;

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

2) (inside IntlGlobalProvider.js) Then out of the context we get the intl functionality we want and expose this by a singleton.

// 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 it anywhere as a module

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)

Millikan

This is also a useful thread; github.com/formatjs/react-intl/issues/416 – Millikan

Answer 2

I don’t think you can access formatMessage directly from middleware because it seems only exposed to components via injectIntl. You can probably file an issue to describe your use case, and maybe a plain JavaScript API to access formatMessage() outside the components will be considered, but it doesn’t seem available now.

Galactopoietic

Answer 3

Inspired by Simon Somlai's answer above, here the equivalent version using react hooks:

import React from 'react';
import { useIntl } from 'react-intl';

// 'intl' service singleton reference
let intl;

export function IntlGlobalProvider({ children }) {
  intl = useIntl(); // Keep the 'intl' service reference
  return children;
}

// Getter function to expose the read-only 'intl' service
export function appIntl() {
  return intl;
}

Then setup IntlGlobalProvider as explained by step 1 of Simon Somlai's answer above. Now when using intl inside any helper/utility class you can do:

import { appIntl } from 'modules/core/IntlGlobalProvider';

const translation = appIntl().formatMessage({ id: 'hello' });
console.log(translation);

Arica

Answer 4

It is supported and feasible now to format strings outside of React lifecycles. You can check the createIntl official documentation here. The code might looks similar to this:

intl.js

import { createIntl, createIntlCache } from 'react-intl';

let cache;
let intl;

/**
 * Generate IntlShape object
 * @param {Object} props
 * @param {String} props.locale - User specified language
 * @param {Object} props.messages - Messages
 * @returns {Object}
 */
const generateIntl = props => {
  if (cache) {
    cache = null;
  }

  cache = createIntlCache();

  intl = createIntl(props, cache);
  return intl;
};

export { generateIntl, intl };

root-component.jsx

import React from 'react';
import { RawIntlProvider, FormattedMessage } from 'react-intl';
import { generateIntl } from './intl';

const messages = { hello: 'Hello' };
const intlValue = generateIntl({ locale: 'en', messages });

export const RootComponent = () => {
  return (
    <RawIntlProvider value={intlValue}>
      <FormattedMessage id="hello" />
    </RawIntlProvider>
  );
};

intl-consumer-script.js

import { intl } from './intl';

const translation = intl.formatMessage({ id: 'hello' });
console.log(translation);

Illuminance

Answer 5

I ran into a somewhat similar problem when trying to initialize a reducer's default state to localized messages. It seems that using any part of react-intl outside of components is nothing which has been considered in the API. Two ideas:

1. Inject intl into a custom component below <IntlProvider> which makes it available in componentWillReceiveProps through an application-wide singleton. Next access that singleton from elsewhere and use intl.formatMessage and others.

2. It is possible to use the Format.js components that React-intl is part of to implement the required functionality. In this case yahoo/intl-messageformat and yahoo/intl-format-cache can be considered. This would of course not integrate well with react-intl out of the box.

Glidewell

Answer 6

You have to use getChildContext() to get intl, which has formatMessage() method.

1.In you root tsx file, e.g. App.tsx.

import { IntlProvider, addLocaleData} from 'react-intl'
import * as locale_en from 'react-intl/locale-data/en'
import * as locale_zh from 'react-intl/locale-data/zh'

import message_en from '@/locales/en'
import message_zh from '@/locales/zh-CN'

const messages = {
  'en': flattenMessages(message_en),
  'zh': flattenMessages(message_zh)
}

addLocaleData([...locale_en, ...locale_zh])

const intlProvider = new IntlProvider({ locale: 'zh', messages: messages['zh']})

// export intl
export const { intl } = intlProvider.getChildContext()

2. In your saga file.

import { intl } from '@/App';

function* handleSubmit() {
  try {
    yield someApi()
  } catch(error) {
    console.log(intl.formatMessage(error.message))
  }
}

Under the hood, IntlProvider receives these props and has class method getChildContext.

namespace IntlProvider {
      interface Props {
          locale?: string;
          timeZone?: string;
          formats?: any;
          messages?: any;
          defaultLocale?: string;
          defaultFormats?: any;
          textComponent?: any;
          initialNow?: any;
          onError?: (error: string) => void;
      }
  }
  
class IntlProvider extends React.Component<IntlProvider.Props> {
      getChildContext(): {
          intl: InjectedIntl;
      };
  }

Go deeper into InjectedIntl interface. You can see why intl instance has formatMessage method.

interface InjectedIntl {
    formatDate(value: DateSource, options?: FormattedDate.PropsBase): string;
    formatTime(value: DateSource, options?: FormattedTime.PropsBase): string;
    formatRelative(value: DateSource, options?: FormattedRelative.PropsBase & { now?: any }): string;
    formatNumber(value: number, options?: FormattedNumber.PropsBase): string;
    formatPlural(value: number, options?: FormattedPlural.Base): keyof FormattedPlural.PropsBase;
    formatMessage(messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: MessageValue}): string;
    formatHTMLMessage(messageDescriptor: FormattedMessage.MessageDescriptor, values?: {[key: string]: MessageValue}): string;
    locale: string;
    formats: any;
    messages: { [id: string]: string };
    defaultLocale: string;
    defaultFormats: any;
    now(): number;
    onError(error: string): void;
}

Conroy

getChildContext() doesn't exist anymore. It has been replaced by createIntl() – Encratis

Answer 7

I believe that you should avoid doing this in middleware. You can dispatch your action with already translated messages.

const deleteUser = (id, messages) => {
   type: DELETE_USER,
   payload: {id, messages}
}

Then in your saga (or other middleware) you can use this already translated message.

function* deleteUserWatcher({
  payload: { id, messages }
}) {
  try {
    yield request.delete(`/user/${id}`);
    yield put(deleteUserSuccess(id));
    yield put(pushNotificationToStack(message.success));

  } catch (error) {
     yield put(pushNotificationToStack(message.error));
  }
}

Then in your component you can dispatch action

const dispatch = useDispatch();
const { formatMessage } = useIntl();

const handleDeleteUser = id => {
  dispatch(deleteUser(id, {
     success: formatMessage({
      id: "User.delete.success",
      defaultMessage: "User has been deleted"
     }),
     error: formatMessage({
      id: "User.delete.error",
      defaultMessage: "Ups. Something went wrong. Sorry :("
     }),
   } 
 ));
}

I know that this is not fit to all situations, but you can cover the most cases with this approach

Preponderance