你是否遇到过在前端项目中需要将 preact 组件包裹在类似于 react-redux 的 Provider 中，才能在不同组件间共享状态的场景呢？@nichoth/preact-connect 这个 npm 包正是为了解决这个问题而诞生的。这篇文章将会向你介绍如何正确地安装、使用以及配置该 npm 包。
安装
你可以使用 npm 或者 yarn 进行安装：
npm install @nichoth/preact-connect -S
yarn add @nichoth/preact-connect
示例代码
默认情况下，@nichoth/preact-connect 将会在全局作用域中创建一个名为 connect 的函数。使用该函数您可以将状态管理器的状态映射到组件的 props 中，来实现对状态的操作。下面是一个简单的示例代码：
-- -------------------- ---- -------
-- --------
------ - -- ------ - ---- ---------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------------------
----- ------------ - - ------ - --
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - --
--
---- ------------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
--
----- ----- - ---------------------
----- ------- - ------- -- -
-----
---------- ------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
----- --------------- - ------- -- --
------ ------------
---
----- ------------------ - -
---------- -- -- -- ----- ----------- ---
---------- -- -- -- ----- ----------- ---
--
----- ---------------- - --------
----------------
------------------
-----------
-------
--------- --------------
----------------- --
------------
-------------
--您可以在上述代码中看到，有三个主要的组件：Counter 组件、mapStateToProps 函数以及 mapDispatchToProps 对象。Provider 组件将状态管理器的状态传递给后代组件，connect 函数接收这些状态并将其映射到 Counter 组件的 props 属性中。
使用说明
Provider：该组件是状态管理器的 Root 组件。当创建 Store 后，使用该组件可以将状态传递给在Connect组件内部的组件。<Provider store={store}> <ConnectedCounter /> </Provider>connect函数：该函数接收两个函数参数：mapStateToProps和mapDispatchToProps。返回一个高阶组件，将状态和dispatch映射到组件的props属性中。-- -------------------- ---- ------- ----- --------------- - ------- -- -- ------ ------------ --- ----- ------------------ - - ---------- -- -- -- ----- ----------- --- ---------- -- -- -- ----- ----------- --- -- ----- ---------------- - -------- ---------------- ------------------ -----------
mapStateToProps(state)函数：该函数接收状态管理器的state，返回一个对象，将状态映射到组件的props属性中。const mapStateToProps = (state) => ({ count: state.count, });mapDispatchToProps(dispatch)对象：该对象包含至少一个 action creator 函数。返回一个对象，将这些 action creator 映射到组件的props属性中，以实现通过组件调用dispatch函数来更新状态的功能。const mapDispatchToProps = { increment: () => ({ type: "INCREMENT" }), decrement: () => ({ type: "DECREMENT" }), };
总结
使用 @nichoth/preact-connect 可以轻松实现对状态管理器的状态进行操作。在实践中，您还应该学会如何使用异步 Action、异步中间件以及 compose 函数来构建更加丰富的前端应用程序。如果您想要深入了解这些内容，可以查看 Redux 维护的文档。
更多细节及函数 API 用法，可以在 npm 库中查看文档。谢谢您的阅读，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e2448ee