在国际化的 Web 开发中，使用多语言是必要的。而 redux-polyglot 是一个能够帮助开发者管理多语言的 npm 包，可以让开发人员在项目中轻松实现多语言切换。 本篇文章将介绍如何使用 redux-polyglot，目前最新版本为 v2.0.0。
安装
使用 npm 安装 redux-polyglot：
npm install --save redux-polyglot
使用
创建 polygot 对象
我们需要在 Redux 中创建 polygot 对象：
-- -------------------- ---- ------- ------ -------- ---- ---------------- ------ - --------------- - ---- -------- ------ - ------------------------ - ---- ----------------- ----- ------------ - - ----------- ------- ----- ----------- --------- ---- -- ----- -------- - --- ----------------- ----- -------- --------------- ----- ----------- - ----------------- --- ----- ----- - ------------------------ ---------------- ---------------------------------- ---
在上面的代码中，我们首先创建了一个 Polyglot 对象，并将其传递给由 Redux 创建的 store。
这里还需要注意，因为我们的多语言文本是放在 Polyglot 对象中的，所以在使用 polyglot 时，必须将 polyglot 对象注入到 state 中，并在需要翻译的组件中使用。
组件中使用
在 React 组件中使用 redux-polyglot，需要用到 redux 中的 connect 方法，并在组件中将 polyglot 对象与 state 绑定，如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- -------- ------- --------------- -
-------- -
----- - -------- - - -----------
----- -------- - ---------------------- ------ ---------
------ -
---------------------
--
-
-
-------- ---------------------- -
----- - -------- - - ------
------ - -------- --
-
------ ------- -----------------------------------在上面的代码中，我们首先绑定了 polyglot 对象，并用 connect 方法将其与 Redux store 的 state 绑定起来。然后在组件的 render 方法中通过 polyglot.t 方法进行翻译。
多语言切换
使用 Polyglot 对象可以轻松实现多语言切换。我们需要在 Redux 中创建一个 action 来切换当前语言，并在完成后重新创建 Polyglot 对象。
-- -------------------- ---- -------
----- --------------- - ------------------
-------- ---------------------- -
------ -
----- ----------------
-------- - ------ -
--
-
----- ----------- - -----------------
--------- ------ - -------- ----- -------- -------------- ------- -- -
------ ------------- -
---- ---------------- -
----- - ------ - - ---------------
------ - ------- -------- -------------------- --
-
--------
------ ------
-
-
---
-------- ---------------------- -
----- - -------- - - ------
------ - -------- --
-
-------- ---------------------------- -
------ -
----------------- -------- -- -
---------------------------------
-
-
-
----- -------- ------- --------------- -
-------------------------- -
----- - ---------------- - - -----------
-----------------------
-
-------- -
----- - -------- - - -----------
----- -------- - ---------------------- ------ ---------
------ -
-----
----------
------- --------------------------------------------- -------
------ -- -------
---------
------
--
-
-
------ ------- ------------------------ ------------------------------在上面的代码中，我们创建了一个切换语言的 action，然后在 Redux 中为 polyglot 对象设置了 reducer。在组件中，我们增加了一个点击按钮来触发 switchLanguage action。
示例代码
最后提供一个完整的示例代码，你可以通过这个示例自己尝试实现多语言切换，理解如何使用 redux-polyglot。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------- - ---- --------------
------ -------- ---- ----------------
------ - ------------------------ - ---- -----------------
----- ------------ - -
--- -
----------- ------- -----
----------- --------- ----
--
--- -
----------- ---- -----
----------- ---- ----
-
--
----- --------------- - ------------------
-------- ---------------------- -
------ -
----- ----------------
-------- - ------ -
--
-
----- ----------- - -----------------
--------- ------ - -------- ----- -------- ----------------- ------- -- -
------ ------------- -
---- ---------------- -
----- - ------ - - ---------------
------ - ------- -------- -------------------- --
-
--------
------ ------
-
-
---
-------- ---------------------- -
----- - -------- - - ------
------ - -------- --
-
-------- ---------------------------- -
------ -
----------------- -------- -- -
---------------------------------
-
-
-
----- -------- ------- --------------- -
---------------------------- -
----- - ---------------- - - -----------
-------------------------
-
-------- -
----- - -------- - - -----------
----- -------- - ---------------------- ------ ---------
------ -
-----
----------
------- --------------------------------------------- -------
------ -- -------
---------
------
--
-
-
----- ----- - ------------------------ ----------------
---------------------------- ----------------- ----- -------- ------------------
---
------ ------- ------------------------ ------------------------------结语
通过这篇介绍，相信大家都已经掌握了 redux-polyglot 的基本使用方法，能够在自己的项目中轻松实现多语言切换。中文的示例代码已经分享给大家，希望大家通过自己的实践和努力，让自己的 Web 应用逐渐走向国际化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006700de361a36e0bce8cdd