Translate function in action creator

[ryandrewjohnson]

Translate function in action creator

[ryandrewjohnson]

The translate function is really meant to be used at the component level. How about instead of trying to pass the already translated copy to the component you instead just pass the translation keys to the component. That component would then just need access to translate, and then would use the provided keys.

Using your example:

export function downloadConfig(config: ConfigState, translate: Translate) {
  return function(dispatch: Function): Promise<void> {
    return ConfigApi.downloadConfig(config).then(resp  => {
      fileDownload(JSON.stringify(<ConfigState> resp.data, null, 2), "config.json");
    }).catch( error => {
      dispatch(showErrorDialog(
        'modal.error.connecting',
        error.message,
        ConfigApi.BASE_URL + JSON_URL));
    });
  };
}

Now your error dialog gets passed the modal.error.connecting translation key instead of the translated copy. Now you just need to ensure that your ErrorDialog component has access to translate, and then just use translate as per usual { translate('modal.error.connecting') }.

[acerola1]

That was my first solution as well, but later on I have called the Error dialog with different patterns. It is hard to predict which property of the dialog I will use translate on and which one came from other parts of the application (eg. backend) without translate in the frontend side.
For example:

   dispatch(showErrorDialog(
      this.props.translate("new-topology.loading-error-title"),
      this.props.translate(`new-topology.${message1}`),
      message2 ? this.props.translate(`new-topology.${message2}`) : undefined
      )
    );

It is not that important just bugged me if I can found a neater solution. I had a little time to think about is between two projects. Thanks for your time.