npm 包 redux-schema-middleware 使用教程

阅读时长 4 分钟读完

在前端开发中,Redux 是一种非常流行的数据流管理库。redux-schema-middleware 是一款基于 Redux 开发的中间件,可以在 Redux 的数据流中自动校验传递的数据形式是否符合指定的 JSON Schema 规范,从而保证数据的可靠性,降低了开发的繁琐度和出错率。

安装

你可以通过 npm 包管理器进行安装:

使用

在 Redux store 中引入 redux-schema-middleware:

-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ---------------- ---- --------------------------
------ ----------- ---- -------------------------
------ ------ ---- -------------------

----- ----- - ------------
  ------------
  -----------------------------------------
--

其中,rootReducer 是一个普通的 Redux reducer,schema 是符合 JSON Schema 规范的数据结构,以定义传递的数据类型和形式。

定义一个示例的 schema,如下所示:

-- -------------------- ---- -------
----- ------ - -
  ----- ---------
  ----------- -
    ----- -
      ----- ---------
      ---------- --
      ---------- --
    --
    ---- -
      ----- ----------
      -------- --
      -------- ---
    --
    ------ -
      ----- ---------
      ------- -------
    -
  --
  --------- -------- ------ --------
--

此处定义了一个对象类型,包含 name、age、email 三个字段,分别为字符串类型、整数类型、邮箱格式字符串类型,同时限制了各字段的最小值/长度、最大值/长度等约束条件。

在 Redux store 中定义 action,并使用 dispatch 方法进行派发:

-- -------------------- ---- -------
----- ------- - ------ ---- ------ -- --
  ----- -----------
  -------- -
    -----
    ----
    -----
  --
  ----- -
    ------- ------------
  -
---

------------------------------ --- ---------------------

其中,ADD_USER 是一个普通的 Redux action,payload 中包含传递的数据,meta 中的 schema 字段指定了使用的 JSON Schema 名称(在上述示例中约定为 userSchema)。

错误处理

如果传递的数据不符合定义的 JSON Schema 规范,middleware 会抛出一个 redux-schema-middleware/SCHEMA_VALIDATION_FAILED 的异常,其中包含了详细的错误信息。

在 Node.js 环境下,可以捕获该异常并进行相应的处理:

-- -------------------- ---- -------
------ - ------------------------ - ---- --------------------------

--- -
  ----------------------------- ---- --------
- ----- ----- -
  -- --------- --- ------------------------- -
    ------------------------
  -
-

在浏览器环境下,可以通过 window.onerror 全局事件进行捕获和处理:

结语

redux-schema-middleware 是一款非常实用的 Redux 中间件,可以帮助我们在数据流中自动校验数据的形式和类型,保障了数据的正确性。在项目开发过程中,我们应该充分利用其功能,并注意处理可能出现的异常情况。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ac1

纠错
反馈