npm 包 redux-polyglot 使用教程

在国际化的 Web 开发中，使用多语言是必要的。而 redux-polyglot 是一个能够帮助开发者管理多语言的 npm 包，可以让开发人员在项目中轻松实现多语言切换。 本篇文章将介绍如何使用 redux-polyglot，目前最新版本为 v2.0.0。

安装

使用 npm 安装 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

阅读全文

猜你喜欢

  • npm 包 spm-moment 使用教程

    简介 在前端开发中，时间处理是一个很常见的需求，而 moment.js 是一个非常优秀的 JavaScript 时间处理库。而 spm-moment 则是一个由阿里开发的基于 seajs 的 mome...

    4 年前
  • npm包 spredis 使用教程

    在前端开发中，我们通常会用到 Redis 这样的内存数据库来缓存数据，加快数据处理和存储速度。而在操作Redis时，我们可能会遇到一些麻烦，比如需要手动编写 Redis 命令或者需要配置 Redis ...

    4 年前
  • npm 包 spreadsheet-expr 使用教程

    作为前端开发者，我们经常需要在项目中应用到数据表格。Spreadsheet-expr 是一个能够在前端实现类似于表格软件的公式计算功能的 npm 包。本文将详细介绍如何使用这个包，并提供示例代码。

    4 年前
  • npm 包 spreadsheetdb 使用教程

    在前端开发过程中，我们经常需要使用 Excel 表格来存储数据和信息。在 JavaScript 这门语言中，我们可以使用 npm 包 spreadsheetdb 来方便地管理和操作 Excel 表格。

    4 年前
  • npm 包 spreadsheet-column 使用教程

    如果你正在开发一个需要使用电子表格的前端应用程序，则经常需要处理电子表格中的列信息。在这种情况下，npm 包 spreadsheet-column 提供了一种简单的方法来计算电子表格中的列信息。

    4 年前
  • npm 包 squba 使用教程

    简介 squba 是一款能够帮助前端开发者快速生成项目目录结构的 npm 包。它可以根据用户输入的选项快速创建项目文件夹、构建系统、测试系统等各类文件和目录，极大地提升了项目开发效率。

    4 年前
  • npm 包 sqlcut-mssql 使用教程

    随着数据量的快速增长，数据管理已经成为企业的核心部分。在许多情况下，操作数据库变得非常重要。sqlcut-mssql 是一个 Node.js 的 npm 包，它允许你使用 SQL Server 非常轻...

    4 年前
  • npm包sqlcmdjs使用教程

    sqlcmdjs是一款基于Node.js和npm的npm包，可以帮助开发者更加方便、快捷地执行SQL语句，以及对数据库进行增删改查操作。 安装 使用npm安装sqlcmdjs： --- -------...

    4 年前
  • npm 包 sqlcmd-runner 使用教程

    在前端开发过程中，数据库操作是必不可少的一部分。传统上，我们需要在 SQL Server 中手动执行 SQL 命令以完成对数据库的操作。但是这种方式显然效率低下、易出错。

    4 年前
  • npm 包 squee 使用教程

    简介 在前端开发中，我们经常需要使用到一些第三方库，而 npm 是一个非常流行的包管理工具。squee 是一个基于 npm 的插件，它可以帮助我们更加简单、高效地执行一些常见的字符串操作。

    4 年前
  • npm 包 sqlcut 使用教程

    在前后端分离的开发模式下，前端的数据处理和数据展示变得越来越重要。SQL语句编写是常见的数据处理方式，但是在前端中使用SQL语句是非常困难的，这个时候 npm 包 sqlcut 就能提供帮助。

    4 年前
  • npm 包 sqlcmd-sqlite3 使用教程

    前言 sqlcmd-sqlite3 是一个 npm 包，它提供了一种使用 SQL 命令行管理 SQLite 3 数据库的方式。如果你是一名前端开发人员，常常需要与 SQLite 3 数据库打交道，那么...

    4 年前
  • npm 包 sqlcmd-sql 使用教程

    在前端开发中，我们常常需要与数据库进行交互。而 sqlcmd-sql 是一个方便快捷的 npm 包，可以帮助我们在 Node.js 环境下进行 SQL 的执行和调用操作。

    4 年前
  • npm 包 sqlcut-pg 使用教程

    前言 在开发 Web 应用程序时，数据管理是非常重要的一部分。而 SQL 语言是关系型数据库的标准语言，已经成为许多 Web 应用程序的首选。在 Node.js 中，我们可以使用 sqlcut-pg ...

    4 年前
  • npm 包 sqlectron-term 使用教程

    在我们开发前端项目时，可能需要与数据库进行交互和查询操作，通常需要使用可视化的数据库管理工具。而 sqlectron-term 正是一款基于命令行界面的数据库管理工具，可以帮助我们更高效地进行数据库管...

    4 年前
  • npm 包 sqldash 使用教程

    前言 在前端开发过程中，需要使用一些数据库来存储数据，此时需要用到 SQL 语句来操作数据库。但是，写 SQL 语句较为繁琐，且容易出错。因此，本文介绍了一个功能强大的 npm 包 sqldash，简...

    4 年前
  • npm 包 sqldog 使用教程

    sqldog 是一个基于 Node.js 并使用 sqlite3 数据库的小型 ORM 库，提供了方便的 SQL 查询操作和数据库管理功能。本文将介绍 sqldog 的使用方法和注意事项，并附带实用示...

    4 年前
  • npm 包 sqlcut-mysql 的使用教程

    在前端开发中，SQL 查询是必不可少的一部分。对于 MySQL 数据库的使用，我们可以通过 npm 包 sqlcut-mysql 来简化我们对 SQL 查询的操作。

    4 年前
  • npm 包 spready 使用教程

    什么是 spready？ Spready 是一个 JavaScript 库，用于将 JavaScript 对象展开成类似数组的形式。它和 ES2015 中的扩展运算符（spread operator）...

    4 年前
  • npm包sqlfile-loader使用教程

    随着前端项目的复杂化和模块化，我们经常需要使用到各种前端依赖库和工具，尤其是在涉及到数据存储和管理的时候。对于一些需要频繁读取 SQL 文件的项目，sqlfile-loader 是一个非常实用的工具，...

    4 年前

相关推荐

    暂无文章