简介
react-redux-lock 是一个 npm 包，它可以在 Redux 应用程序中方便地管理并控制相同组件的多个实例。使用此包，您可以确保每个组件实例都可以获得单独的状态对象，以便它们不相互干扰。
安装与使用
首先，在您的 React + Redux 应用程序中安装 react-redux-lock：
npm install react-redux-lock
然后将其导入并添加到你的 store 中：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ------- ------ - -------- - ---- ------------- ------ - ------------ ---------------------- - ---- ------------------ ----- ------------ - - -- ---- --- ------- ----- - ----- ---------- - -- ----- ----- - ------------ ------------ ------------- ------------------------------ ------------------------- -
最后，您可以在您的组件中使用 withLock 高阶组件：
import { withLock } from 'react-redux-lock'
class MyComponent extends React.Component {
//...
}
export default withLock(MyComponent)现在您就可以方便地跟踪和管理您的组件实例了。
高级使用
在组件之间共享状态
使用 withLock 高阶组件，您可以让两个不同的组件实例共享相同的状态：
-- -------------------- ---- -------
------ - -------- - ---- ------------------
----- ------------ ------- --------------- -
-----
------------------- -
----------------- ---- ---------------- --
-
---------------------- -
------------------- ---- ---------------- --
-
-
----- ------------ ------- --------------- -
-----
------------------- -
----------------- ---- ---------------- --
-
---------------------- -
------------------- ---- ---------------- --
-
-
----- --------------- - ------- --------- -- -
------ -
------------ ------------------------------
-
-
----- -------------------- - ----------------------
----- -------------------- - ----------------------
------ ----- --- - ---------
--------------------------- -- -
------ -
-----
--------------------- --
--------------------- --
------
-
--
-使用自定义的 reducer
如有必要，您可以使用自定义的 reducer 替换默认的 lockReducer，以便在所有组件实例中添加一些自定义逻辑：
-- -------------------- ---- ------- ------ - -------- - ---- ------------- ------ - ------------ ---------------- --------------- - ---- ------- ------ - ----------------------- ----------- - ---- ------------------ ----- --------------- - ------ - --- ------- -- - ----- - ----- ----------- - ----------------- ------ ---------------- -- ---- --- -------- -- ----- ---------- - -- ----- ----- - ------------ ------------ ------------- ------------------------------ ------------------------- -
使用 action 中间件
您可以向 registerLockMiddleware 添加自定义 action 中间件，以便在锁定时应用一些自定义逻辑：
-- -------------------- ---- -------
----- ------------------ - ----- -- ---- -- ------ -- -
-- ------------ --- ------------ -
-- -- ---------
-
------ ------------
-
------------------------------ -------------------------------------------总结
在本教程中，我们介绍了如何使用 react-redux-lock npm 包，以在 Redux 应用程序中方便地管理多个组件实例。我们还探索了一些高级功能，例如在组件之间共享状态，使用自定义 reducer 和 action 中间件。
使用 react-redux-lock，您可以更方便地控制 React Redux 应用程序中的组件实例，并确保它们不会相互干扰。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056d2781e8991b448e6eef