How to translate (i18n) error messages in actions with React, React Intl and Redux?

Question

I've a performLogin action, which triggers an API and tries to authenticate a user with the provided credentials. This API call can lead to errors. Her is my action:

export const performLogin = (email: string, password: string) => {
    return (dispatch) => {
        UsersAPI.login(email, password).then(response => {
            // [..]
        }).catch(error => {
            const definedError: Error = defaultError;
            switch (error.response.status) {
                case 401:
                    definedError.message = 'Invalid email or password';
                    break;
                default:
                    definedError.message = error.message;
            }
            dispatch(displayError(definedError));
        });
    };
};

My question is, how can I internationalize Invalid email or password?

I'm using React Intl so I have the infrastructure for i18n in the components. My idea is to define a error type, set it in the action and let the login component or a global error component decide, which error should be shown.

What is the React-Redux way to do this?

Answer 1

Why are you trying to translate a message in action? Just save error key in store and pass it on props to component and use FormattedMessage to translate it when rendering.