在现代的前端开发中，Redux 已成为管理应用程序状态的首选方式。但是，Redux 的组件连接代码变得重复而冗长。为了解决这个问题，创建了一个 npm 包 redux-container。
本文将介绍 redux-container 的使用，让你更加便捷地连接 Redux 和组件。
安装
npm install --save redux-container
引入
import { connect } from 'redux-container';基础用法
通过组件的静态属性 mapStateToProps 和 mapDispatchToProps 把 Redux 存储库中的状态和操作映射到组件的属性中。
以下示例将一个值存储在 Redux 存储库中，并从组件中获取该值。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------ ---------------------- -
------ - -------- ------------- -
-
-------- -
------ ------- ----- -- --------------------------
-
-
------ ------- ---------------------这里 connect 函数接受你的组件并返回已连接到 Redux 的组件。
mapDispatchToProps
你还可以使用 mapDispatchToProps 来映射 Redux 操作到组件属性。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- - ---- ------------
----- ----------- ------- --------- -
------ ---------------------------- -
------ -
-------------- ------- -- -------------------------------
-
-
----------- - -- -- -
-----------------------------
-
-------- -
------ -
------- ---------------------------
--- -- ----- -- --
---------
--
-
-
------ ------- ---------------------这里的 updateMyValue 是你的 Redux 操作。mapDispatchToProps 将这个操作映射到了组件属性中，并将其调度分发到 Redux 存储库中。
合并多个属性
使用 mapStateToProps 和 mapDispatchToProps 可以连接多个属性到组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------- - ---- ------------
----- ----------- ------- --------- -
------ ---------------------- -
------ - -------- ------------- -
-
------ ---------------------------- -
------ -
-------------- ------- -- -------------------------------
-
-
----------- - -- -- -
-----------------------------
-
-------- -
------ -
-----
-- ----- -- --------------------
------- ---------------------------
--- -- ----- -- --
---------
------
--
-
-
------ ------- ---------------------自定义 connect
有些情况下，你可能需要在 connect 之前修改映射的属性。在这种情况下，可以使用 connectAdvanced 函数。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------------- - ---- ------------------
------ - ------------- - ---- ------------
----- ----------- ------- --------- -
----------- - -- -- -
-----------------------------
-
-------- -
------ -
-----
-- ----- -- --------------------
------- ---------------------------
--- -- ----- -- --
---------
------
--
-
-
-------- ------------------------ -
--- --------------
------ ------- -- -
----- ----------- - -
-------- -------------
--
-- -------------- -- --------------------- --- -------------- -
-------------------------
------ --------------
-
-----------------------------
------------- - ------------
------ ------------
--
-
-------- --------------------------- -
--- -----------------
------ ---------- -- -
----- -------------- - -
-------------- ------- -- ------------------------------
--
-- ----------------- -- ------------------------------ --- ----------------------------- -
-------------------------
------ -----------------
-
-----------------------------
---------------- - ---------------
------ ---------------
--
-
------ ------- ----------------
-----------------------
-------------------------
---------------在这个示例中，mapStateToPropsFactory 和 mapDispatchToPropsFactory 工厂函数被用于创建映射函数。它们使用一个技巧称为 “记忆” 来提高性能。
结论
Redux 连接代码很冗长，redux-container 能更好地把它简化。虽然它不能解决所有连接问题，但它能在很多情况下为你节约时间和精力。
希望本文能帮助你更好地使用 redux-container。如果你还有任何问题，可以在下面留言。谢谢！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ffee361a36e0bce8a5b