16

アプリケーションで複数の言語をサポートしており、これには React-intl を使用しています。サーバーを呼び出す Redux ミドルウェアがあり、エラーが発生した場合は UI にエラーを表示したいと考えています。

私は次のようなことができることを知っています:

1) メッセージ キーを使用してミドルウェアからアクションをディスパッチします。

{type: SHOW_ERROR, message: 'message_error_key'}

2）私のReactコンポーネントの使用で：

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

しかし、ミドルウェアから既に翻訳されたメッセージでアクションをディスパッチする方法はありますか?

{type: SHOW_ERROR, message: [translated_message_should_be_here]}
4

7 に答える 7

10

formatMessageを介してのみコンポーネントに公開されているように見えるため、ミドルウェアから直接アクセスできないと思いますinjectIntl。formatMessage()ユース ケースを説明する問題を提出することができます。また、コンポーネントの外部にアクセスするためのプレーンな JavaScript API が検討されるかもしれませんが、現在は利用できないようです。

于 2016-04-16T01:49:52.350 に答える
3

レデューサーのデフォルト状態をローカライズされたメッセージに初期化しようとしたときに、やや似た問題に遭遇しました。コンポーネントの外側で react-intl の任意の部分を使用することは、API で考慮されていないようです。2 つのアイデア:

  1. intl以下のカスタム コンポーネントに注入して、アプリケーション全体のシングルトンを介し<IntlProvider>て使用できるようにします。componentWillReceiveProps次に、別の場所からそのシングルトンにアクセスし、その他を使用intl.formatMessageします。

  2. React-intl が含まれるFormat.jsコンポーネントを使用して、必要な機能を実装することができます。この場合、 yahoo/intl-messageformatとyahoo/intl-format-cacheが考えられます。もちろん、これはそのままでは react-intl とうまく統合できません。

于 2016-05-02T22:17:03.410 に答える
2

上記のSimon Somlaiの回答に触発されたもので、反応フックを使用した同等のバージョンは次のとおりです。

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;
}

次に、上記のSimon SomlaiIntlGlobalProviderの回答のステップ 1 で説明されているようにセットアップします。ヘルパー/ユーティリティクラス内で使用する場合、次のことができます。intl

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

const translation = appIntl().formatMessage({ id: 'hello' });
console.log(translation);
于 2020-04-19T20:00:39.540 に答える
0

ミドルウェアでこれを行うことは避けるべきだと思います。すでに翻訳されたメッセージでアクションをディスパッチできます。

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

次に、サガ (または他のミドルウェア) で、この既に翻訳されたメッセージを使用できます。

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));
  }
}

次に、コンポーネントでアクションをディスパッチできます

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 :("
     }),
   } 
 ));
}

これがすべての状況に適しているわけではないことはわかっていますが、このアプローチでほとんどのケースをカバーできます

于 2019-11-24T10:14:20.287 に答える