Translate function in action creator

[acerola1]

Most of the time we use the translate function from components. A component gets the translate function as a property from connect.
My problem is that sometimes we must use the translate from an action creator. I wonder if is there better way to access the translate function in an action creator than pass it to each action creator call?
For 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(
        translate("modal.error.connecting") as string,
        error.message,
        ConfigApi.BASE_URL + JSON_URL));
    });
  };
}

[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.