在我们的应用程序中，多语言是重要的一部分，因为它可以使我们的应用程序面向更广泛的用户以及更多的区域。而 Redux 作为一种状态管理框架，在多语言场景下也能够应用自如，本文将介绍 Redux 中多语言场景下的最佳实践。
国际化解决方案
国际化是一种将应用程序翻译成多种语言的过程，这有助于扩大应用程序的受众范围。React 社区有很多方案可以处理国际化需求，包括但不限于：
- react-intl: 一种针对 React 应用程序的国际化库，提供了一种简单而强大的方法来格式化和显示消息，其中包括数字、时间和货币。
- i18next: 一种面向大型应用程序的国际化库，提供了多种选项来管理不同语言的翻译。
本文将使用 react-intl 这个库来说明 Redux 中多语言场景下的最佳实践。
在 Redux 中使用 react-intl
在 Redux 中使用 react-intl 有两种方式，一种是在组件中使用，另一种是在 Redux 中使用。
在组件中使用 react-intl 非常简单，只需要通过 injectIntl 高阶组件将 intl 对象注入到组件的 props 中，然后就能在组件中使用 FormattedMessage 组件了。
------ - ----------- ---------------- - ---- -------------
----- ----------- - -- ---- -- -- -
-----
-----------------
----------------
---------------------- -------
--------------- ------- ------------
--
------
--
------ ------- ------------------------但是，在 Redux 中使用 react-intl 就需要更多的注意。由于数据流的特性，Redux 中的状态更新是通过 action 触发的，而且一旦 action 发出后，我们就无法在应用程序的其他部分直接访问 intl 对象。
因此，在 Redux 中使用 react-intl，我们需要为每个语言都创建一个 intl 对象，并且将其存储在 Redux 的状态中。这样，在状态更新后，我们就可以通过使用存储在状态中的 intl 对象来更新应用程序中的界面。
以下是一个简单的示例，展示了如何在 Redux 中存储 intl 对象以供后续使用。
-- ------ -----
----- --------------- - ------------------
-- -------
----- -------------- - ---------- -- -- ----- ---------------- -------- ---
-- --------
----- ------------ - - --------- ----- ----- -- --
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ -
---------
--------- ----------------
----- ------------
------- ----------------
--------- -
------ ------- --------
-
--
--
--------
------ ------
-
--
-- ---------
------ ----- ---------------- - ------- --- ------- -- -
----- - ---- - - ------
------ -------------------- --- --------------- -- -- --------
--
-- -----
----- ----------- - -- ---- -- -- -
-----------------
--
----- --------------- - ------- -- --
----- ----------------------- -------- - ----- ------- --
---
----- ------------------ - -
--------------
--
------ ------- ------------------------ ---------------------------------在上面的示例中，我们定义了一个 rootReducer，其中包含了一个 intl 对象和一个 language 属性。intl 对象是通过 createIntl() 方法在每次更新 action 时生成的，保持应用程序中的 intl 对象始终与当前语言匹配。
然后，我们定义了一个 selectors，用来在 Redux 中获取格式化的文本，例如："Hello, World!"。最后，我们在 MyComponent 中使用 connect() 方法将 state 和 actions 与组件绑定起来，并且使用 getFormattedText() 方法格式化文本。
最佳实践
在 Redux 中使用 react-intl，以下是一些最佳实践：
- 在状态中存储
intl对象，并在每次更新action时生成新的intl对象。 - 在
selectors中使用存储在状态中的intl对象来格式化文本。 - 尽可能的重用
FormattedMessage组件，避免在组件中重复定义相同的文本。 - 如果需要在应用程序的其他部分中使用
intl对象，可以考虑将其存储在context中。
总结
在 Redux 中处理多语言需求需要格外小心，但是如果遵循上面提到的最佳实践，我们就能便捷地为应用程序增加多语言的支持。使用 react-intl，我们能够轻松格式化像数字、货币、时间等文本，而且通过使用 Redux，我们获得了访问和更新状态的能力，可以更好地控制我们的应用程序。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/647de188968c7c53b08b155f