简介
encaps-redux 是一个可以方便地将 Redux 实例嵌入组件内部的库。它旨在简化组件与 Redux 的交互过程，并提供了一种可以重用复杂逻辑的方式。
安装
使用 npm 安装：
npm install encaps-redux
使用
基本用法
首先，需要使用 Provider 来将 Redux 实例提供给整个应用。在组件内部，可以使用 connect 函数将 Redux 状态和操作映射到组件的 props 上。
使用 encaps-redux 后，可以在组件内部使用 store 和 dispatch，而不需要直接从它们的父组件中传递。这样可以更好地封装组件内部状态和逻辑。
-- -------------------- ---- -------
------ - --------- ------- - ---- --------------
------ - ----------- - ---- --------
------ - ----------- - ---- ---------------
----- ------------ - - ------ - --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
----- ------- - -- ------ -------------- -- -- -
-----
--------- -----------
------- -------------------------------------------
------
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - ---------- -- --
--------------- -- -- ---------- ----- ----------- ---
---
----- ---------------- - ------------------------ -----------------------------
----- ------------------- - ------------------------------
----- --- - -- -- -
--------- --------------
-------------------- --
-----------
--
-------------------- --- ---------------------------------使用选项
encapsulate 函数接受一个可选的选项对象，可以用来控制 store 和 dispatch 是否应该被嵌入到组件中。
const EncapsulatedCounter = encapsulate(ConnectedCounter, {
storePropName: 'foo',
dispatchPropName: 'bar',
});这将在组件中创建两个新的 props：foo 和 bar，并将 store 和 dispatch 注入到它们中。注意，这会破坏 connect 函数原本的使用方式，因此建议仅在需要特殊逻辑时使用此选项。
使用示例
以下是一个使用 encaps-redux 的示例，它实现了一个具有多个步骤的表单，每个步骤都有自己的数据和验证逻辑。
-- -------------------- ---- -------
----- --------- - -- --------- ------------ ------------ -- -- -
----- -------- - ------- --
------------- ------------ -------------------- ------------------ ---
----- -------- - ------- -- -
-----------------------
---------------
--
------ -
----- --------------------
-------
-----
------ ----------- ------------------- -------------------- -- --- --
--------
------- ---------------------------
-------
--
--
----- --------- - -- --------- ------------ ------------ -- -- -
----- -------- - ------- --
------------- ------------ -------------------- ------------------ ---
----- -------- - ------- -- -
-----------------------
---------------
--
------ -
----- --------------------
-------
----
------
----------
-------------------
------------------- -- ---
-------------
--
--------
------- ---------------------------
-------
--
--
----- --------- - -- --------- ------------ -- -- -
----- ------- --------- - -------------
----- -------- - ------- -- -
-----------------------
-- ---------------------- -
---------------- ----- -- --- ----- --- -------------
-------
-
---------------
--
------ -
----- --------------------
-------
----- -- --- ----- --- ----------
------
-----------------
------------ -- -------------
---------------------------- -- ------
---------------
--
--------
------ -- ---------------
------- ---------------------------
-------
--
--
----- ---- - -- -- -
----- ---------- ------------ - -------------
----- ------------ - -- -- -
--------------------- -- ---- - ---
--
----- ------------- --------------- - ------------
----- ----- - -
- ---------- --------- --
- ---------- --------- --
- ---------- --------- --
--
------ -
-----
------------------ - ------------ -- -
----------------------------
---------- -- -
----- ------------------ - --------
------- -- -- --------- -------------- ---
---------- -- --
------------ ------ --
----------
----- ----------------
-------- -----
---
--
------------------- - --------------
----- --------------------- - ------------------------------- -
------ --------------
----------------- -----------
---
------ -
---------------------- --------------------------- --
--
--
-----------------------------
--
------
--
--
----- ------------ - -
--------- ---
--
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ----------------
------ -
---------
--------- -
------------------
------------------
--
--
--------
------ ------
-
--
----- ----- - ---------------------
----- --- - -- -- -
--------- --------------
----- --
-----------
--
-------------------- --- ---------------------------------该示例使用了 useState 来跟踪表单数据和当前步骤。每个表单步骤都使用了一个独立的组件，每个组件都使用了 connect 函数来与 Redux 进行交互。它们在 encapsulate 函数中进行了封装，以使组件能够自行处理 store 和 dispatch。最终，整个表单被包含在一个 Provider 组件中，以将 Redux 实例传递给整个应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e1fa563576b7b1ecd91