在开发一个多语言的前端应用时，使用 React 的最常见方式是将多语言数据保存在应用状态的一部分中。而 redux-intl-connect 包的作用就是使连接 Redux 状态和 react-intl 的国际化消息组件变得更加容易。
redux-intl-connect 是什么？
redux-intl-connect 是一个 npm 包，它提供了一些 Redux 组件和简化了 React Intl 组件的 API。它使 React Redux 应用程序更容易使用 React Intl 的国际化消息组件。
redux-intl-connect 包提供了一个用于连接 Redux 应用状态到 react-intl 组件的高阶组件。它也提供了一个 HOC 来连接 Redux 应用状态和格式化国际化消息的 react-intl 组件。
安装
你可以通过 npm 安装 redux-intl-connect，使用以下命令：
npm install redux-intl-connect --save
基础使用
redux-intl-connect 包提供了两个 HOC connectReduxToProps() 和 connectFormatMessage() 分别用于连接 Redux 应用状态到 react-intl 组件和格式化国际化消息的 react-intl 组件。使用这些 HOCs 之前需要进行一些配置。
配置
首先，你需要在 Redux 应用中安装 redux-intl-reducer 包 并将其添加到 rootReducer 中：
import { reducer as intl } from 'redux-intl-reducer';
const rootReducer = combineReducers({
// ...
intl,
// ...
})然后，你需要在 Redux store 中使用 applyMiddleware 来启用 redux-intl-reducer 包的中间件。你也需要在根组件中添加 ReactIntlProvider 来为 redux-intl-reducer 包提供区域设置和调度器。
-- -------------------- ---- -------
------ - ------------ ---------------- --------------- - ---- --------
------ - ------------ --------------- ------------ - ---- ---------------------
------ - -------- - ---- --------------
------ --- ---- --------
----- ----------- - -----------------
-- --- ----- --------
----- -----------
---
----- ----- - ------------
------------
-------------------------------
--
----- ------ - -----
----------------
--------- --------------
------------- ----------------
---- --
---------------
------------
-------------------------------
--connectReduxToProps()
connectReduxToProps() 提供了一个高阶组件，它允许 react-intl 组件连接到 Redux 应用程序的状态。
以下是 connectReduxToProps() 的用法示例：
-- -------------------- ---- -------
------ - ------------------- - ---- ---------------------
----- --------------- - ----- -- -
------ -
------- ------------------
--------- -------------------
--
--
----- ------- - -- --- --------------- -------- -- -- -
-------------------------------- --- -------------- ---------
--
------ ------- ----------------------------------------------connectFormatMessage()
connectFormatMessage() 提供了一个 HOC，它允许你连接 react-intl 组件到 Redux 应用程序状态，并从中获取已格式化的国际化消息。
以下是 connectFormatMessage() 的用法示例：
-- -------------------- ---- -------
------ - -------------------- - ---- ---------------------
----- --------------- - ----- -- -
------ -
------- ------------------
--------- -------------------
--
--
----- ---- - -- ------ -------- -- -- -
----
--------------- -- -
--- -----------------
----------------------
--- -----------
--------------- -------------------
---
-----
---
-----
--
------ ------- --------------------------------------------高级使用
connectReduxToProps() 和 connectFormatMessage() 也可以通过传递配置参数进行高级使用。
-- -------------------- ---- -------
------ - ----------------- ------------ - ---- -------------
------ - -------------------- - ---- ---------------------
----- --------------- - ----- -- -
------ -
------- ------------------
--------- -------------------
--
--
----- ------- - -
-- ------ -------
-------- -----
------------- -----------
----------------- --------------
--
----- ----------------------------- - ------------------------------------- ---------------------------
----- --- - -- -- -
------------- ----------- --------------
------------------------------ --------------- --
---------------
--withRef 选项允许您使用 ref 访问包装组件的实例。intlPropName 和 messagesPropName 允许您更改传递到包装组件的属性名称。
总结
redux-intl-connect 包提供了一些功能来帮助我们更容易地连接 Redux 应用状态到 react-intl 组件。它的基础使用非常简单，而高级选项可以让我们更灵活地使用它。当我们需要构建多语言的前端应用时，redux-intl-connect 包是一个非常有用的工具，可以使我们更加轻松地完成任务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005576e81e8991b448d46e0