简介
kernel-relay 是一个用于在前端应用中管理数据状态的 npm 包。它跟 Redux 类似，但是更加轻量化且易用。kernel-relay 利用 Observable 和数据 Graph 的概念，提供了一种简单的方式把应用中的状态管理分担给 kernel-relay。这让开发者专注于业务逻辑，而不必担心状态管理的问题。
为什么使用 kernel-relay
相对于 Redux 这类状态管理框架，kernel-relay 更加轻量化。它的学习和使用成本都相对较低。同时，kernel-relay 将应用中的状态管理转移到自身，让开发者可以更加专注于业务逻辑。
一个 kernel-relay 解决了 Redux 中需要大量使用各种 Action Creator，Reducer 和 Store 的问题。数据 Graph 的思想也使得开发者的代码看着更加简洁易懂。
使用教程
安装 kernel-relay
通过 npm 安装 kernel-relay。
npm install kernel-relay --save
配置 GraphQL Schema
kernel-relay 需要先配置 GraphQL Schema。GraphQL Schema 定义了我们项目中的所有数据结构以及相互之间的关系。在 GraphQL 中，Schema 中的每个类型都由一个特定的 Field Resolver 来解析。
下面是一个示例 Schema：
-- -------------------- ---- ------- ---- ----- - ------ ------ - ---- -------- - ------------- -------- ---- ---------------------- ----- ---- - ---- ---- - --- --- ----- ------- ----------- -------- -
根据 Schema 生成 Relay Environment
使用 graphql-js 包将 Schema 转化为一个 Relay Environment 对象。
-- -------------------- ---- -------
----- - -------------------- - - ---------------------------------
----- - --------------------------- - - -------------------------------
----- - --------------- ------------------- - - ------------------------
----- - -------- ------- ----------------- - - ------------------------
----- ------ - ---------------- ------------ ------------------------------ ---
----- ---------------- - ----------------------
--------- -------
---------- ---
-------------------------- -
------------------------------- ------
--
---
--------------------------------------------- -
------ -
------ -- -- -
------ -
-
--- ---------
----- ---- ------
----------- ------
--
--
--
--
--------- -
-------- --- - ---- -- -- -
------ -
--- -------------------------------- - ----------
-----
----------- ------
--
--
--
---
----- -------- - -------------------
------- -----------------
-------- ----------------------------
---这样，我们就成功创建了一个 Relay Environment 环境。
创建 Relay Container
使用 kernel-relay 中的 createRelayContainer 方法来创建一个新的 Relay Container。我们需要传递 relayEnv 和一个 GraphQL Fragment。
-- -------------------- ---- -------
----- - ------------------------ ------- - - -----------------------
----- - -------------------- - - ------------------------
----- -------- - -- ----- ----- -- -- -
------ -
----
----------------------
------- ----------- -- -------------------------- -------------
-----
--
--
----- ----------------- - ----------------------
---------- ---------
------ --------
-------- ------------- -- ---- -
--
----
----------
-
--
---------- -
-------------- ------------- -- -
------ -----------
--------------------------------- - ----- -------- ----- --
--------- -------- -- ---
--
--
---使用 Relay Container
现在，我们可以像使用任何 React 组件一样使用 TodoItemContainer。
const App = () => {
return (
<ul>
<TodoItemContainer todo={{ id: 'todo-1', text: 'Buy milk', isComplete: false }} />
</ul>
);
};总结
在这篇文章中，我们介绍了 kernel-relay 这个 npm 包以及它的使用方法。相对于 Redux 等状态管理框架，kernel-relay 更加轻量化，易学易用。通过使用 Observable 和数据 Graph，kernel-relay 让开发者更加专注于业务逻辑，从而提高了开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efd4c49986ca68d8a24