在前端开发中,Redux 是一种非常流行的数据流管理库。redux-schema-middleware 是一款基于 Redux 开发的中间件,可以在 Redux 的数据流中自动校验传递的数据形式是否符合指定的 JSON Schema 规范,从而保证数据的可靠性,降低了开发的繁琐度和出错率。
安装
你可以通过 npm 包管理器进行安装:
npm install redux-schema-middleware --save
使用
在 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 全局事件进行捕获和处理:
window.onerror = (msg, url, lineNo, columnNo, error) => { if (error.type === SCHEMA_VALIDATION_FAILED) { console.log(error.errors); } };
结语
redux-schema-middleware 是一款非常实用的 Redux 中间件,可以帮助我们在数据流中自动校验数据的形式和类型,保障了数据的正确性。在项目开发过程中,我们应该充分利用其功能,并注意处理可能出现的异常情况。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/60067007e361a36e0bce8ac1