We have a redux react setup.
We have a reducer that contains a list of active notifications
We have a Root component that sets up page wrap stuff - like the IntlProvider, and a notifications overlay.

A Notification can be triggered from any connected component, that dispatch an action to the store, adding a notification to the list.

If we have a single abstract action for adding a notification it might look like this:

this.props.dispatch(addNotification({
    message: this.props.intl.formatMessage(messages.notificationMessage),
});

What I would like to do is creating a notification wrapper that contains the message, so you could do this:

this.props.dispatch(addFooNotification());

Where the action addFooNotification had the message definition inside it. The problem with this is, that the translated messages are not available unless you are in the IntlProvider context, so for this to work, currently, I would have to add an IntlProvider in the action - maybe like so:

const messages = defineMessages({ /* ... */ });

function addFooNotification(locale, messagesForContext) {
    const intlProvider = new IntlProvider({ locale, messages: messagesForContext }, {});
    const { intl } = intlProvider.getChildContext();

    return {
        type: FOO,
        message: intl.formatMessage(messages.notificationMessage)
    };
}

With regards to the emails, a crude example might look something like this:

var messageBody = render(
  <EmailMessage>
    <h1><FormattedMessage defaultMessage='Foo' id='email.title' /></h1>
  </EmailMessage>
);

mailerService.send({
  headers: {
    to: recipient,
    subject: intl.formatMessage({ id: 'email.subject', defaultMessage: 'Foobar' })
  },
  body: messageBody
});

How to use imperative API in a non-component script #416

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions