在现代Web应用程序中,管理应用程序状态非常重要。 Redux是一种流行的解决方案,它提供了一种有效的方法来管理应用程序的状态。 Redux在许多应用程序中使用,但是Redux的目的在于管理大型应用程序,其中的数据结构非常复杂。在这种情况下,将数据标准化是一种解决方案。redux-normalize-middleware是一个用于标准化Redux存储的npm包。在本教程中,我们将介绍如何使用redux-normalize-middleware。
什么是redux-normalize-middleware?
redux-normalize-middleware是一个用于标准化Redux存储的npm包。 当使用复杂的数据结构时,redux-normalize-middleware使得数据变得更加可读和可预测。redux-normalize-middleware使用了normalizr来标准化数据。normalizr是一个独立的标准化库,用于转换嵌套的JSON对象。
如何使用redux-normalize-middleware
要使用redux-normalize-middleware,您需要先使用npm安装它。
--- ------- ------ -------------------------- ---------
安装完成后,您需要将middleware设置到Redux存储的中间件中。
------ - ---------------- ----------- - ---- -------- ------ - ---------- -- ------------------- - ---- ----------------------------- ----- ----- - ------------ -------- --------------------------------------- --
现在Redux存储中的任何操作都将被中间件拦截并执行rules中定义的规则,以标准化数据。
如何使用normalizr来定义规则
现在,我们需要使用normalizr来定义规则。在normalizr中,有两个重要的概念:schema和entity。
一个entity代表一个对象。例如,如果您有一个博客应用程序,可以使用一个PostEntity表示所有的博客文章。
------ - ------ - ---- ------------ ----- ---------- - --- ----------------
Entity接受两个参数。第一个参数是实体的名称,第二个参数是definition
(定义).定义可以使用一个函数定义。
----- ---------- - --- --------------- --- - ------------ ------- ---------------- -- --- ------- -- -- -- -------- ----- -- --- ---
发现,在定义中,我们有一个函数,processStrategy
, 它接受一个对象作为输入并返回处理后的对象。在这种场景下,我们希望使用uuid
作为ID而不是id
。
在Entity对象中,我们可以指定更多的属性,例如relationships(关系), defaults(默认值) 等。
一个schema代表一个嵌套的JSON对象。例如,如果您有一个应用程序,它具有嵌套的博客评论,可以使用一个CommentSchema表示博客评论。
------ - ------ - ---- ------------ ----- ------------- - --- --------------------------
在这个示例中,CommentSchema是一个实体。一个实体可以被其他模式作为属性使用。
----- ---------- - --- --------------- - --------- - ------------- -- ---
在这个例子中,PostEntity有一个comments属性,它是一个数组,并且每个评论都是一个CommentSchema。
现在规则已经定义完成,让我们看看如何使用它。考虑这个应用程序:
- ------ - ----- - --------- - --- --------- ------ --- ----- ------ --------- - - --- ------------ ----- ----------- ------- ------ -- - --- ------------ ----- ------ ------ ------- ------ -- -- -- -- ------- - -------- -- -- -
在这个示例中,我们有一个带有评论的博客文章。要使用规则,我们需要指定一个result
值和一个entities
值。
------ - --------- - ---- ------------ --------------- - ------ - ----- - ---- ----------- -- -- ---
在这个例子中,我们要对posts
进行标准化,我们可以使用通用符:*
来标准化所有博客文章。
normalize函数的结果是一个对象,其中result
返回标准化后的posts
,而entities
对象具有三个属性:posts
,comments
和users
。
示例代码
这里是一个完整的示例应用程序。
index.js
------ - ---------------- ----------- - ---- -------- ------ - ---------- -- ------------------- - ---- ----------------------------- ------ - --------- - ---- ------------ ------ - ----------- ------------- - ---- ------------- ------ ----------- ---- ------------- ----- ---- - - ------ - ----- - --------- - --- --------- ------ --- ----- ------ --------- - - --- ------------ ----- ----------- ------- ------ -- - --- ------------ ----- ------ ------ ------- ------ -- -- -- -- ------- - -------- -- -- -- ----- - --------- ------ - - --------------- - ------ - ----- - ---- ----------- -- -- --- ----- ----- - ------------ ------------ - ------ - ----- --------------- ------- ------------- -- -- --------------------------------------- -- ------------------ -- -------------------------------
entities.js
------ - ------- ------ - ---- ------------ ----- ------------- - --- ------------------- ----- ---------- - --- ---------------- ----- ---------- - --- --------------- - --------- - ------------- -- ------- ----------- --- ------ - -------------- ----------- ----------- --
reducers.js
------ - --------------- - ---- -------- ----- ---------------- - ------ - --- ------- -- - ------ ------------- - -------- ------ ------ - -- ----- --------------- - ------ - --- ------- -- - ------ ------------- - -------- ------ ------ - -- ----- ------------ - ----------------- ----- ----------------- ------- ---------------- --- ------ ------- ----------------- ------ ------------- ---
本教程介绍了如何使用redux-normalize-middleware来标准化Redux存储。 在实际应用中,标准化数据很有用,特别是在具有复杂数据结构的大型应用程序中。 从这个教程中学到了如何使用normalizr定义规则和如何在Redux存储中使用redux-normalize-middleware。 我们还给出了一个完整的示例应用程序来演示如何使用它们。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067009e361a36e0bce8be4