1. 介绍
erschema-redux-immutable是一个使用Immutable.js和Reselect提供了一种简单而强大的方式来处理Redux应用程序中的数据验证和规范化的npm包。它是基于erschema创建的。
2. 安装
使用npm进行安装
npm install erschema-redux-immutable --save
3. 如何使用
3.1. 创建验证规则
使用erschema-redux-immutable需要知道如何创建验证规则。以下是一个示例规则,其中“id”是数据的主ID,要求必须为数字和大于零。
import {Rule, validators} from 'erschema'; const rules = { id: new Rule(validators.integer, 'ID must be an integer that is greater than zero', {min: 1}) };
3.2. 应用于Redux Store
将规则应用于Redux Store,需要创建一个包含验证规则的schema对象。以下是一个示例:
-- -------------------- ---- ------- ------ -------- ---- ----------- ------ --------- ---- ------------ ----- ------ - --- -------------- ----- ------------ - ------------------ ------ -- --- -------- ------------- - ------------- ------ - --- - ------ ------------- - ---- ----------- ----- ---- - -------------------------------- ------ --------------------- ----- -- ------------------ -------- ------ ------ - - ------ ------- --------
3.3. 验证数据
现在,数据将在Redux Store添加之前自动通过验证规则进行验证。以下是一个示例的提交过程:
store.dispatch({ type: 'ADD_ITEM', payload: { id: 1, name: 'Apple' } });
由于提交的payload具有不符合规则的属性"name",因此会抛出以下错误:
Error: ID must be an integer that is greater than zero
3.4. 使用Reselect选择器
使用Reselect选择器可以轻松地规范化数据。以下是一个将数据规范化为Map的示例:
-- -------------------- ---- ------- ------ ---------------- ---- ----------- ------ ---------------- ---- --------------------------- ----- ------------- - ----- -- ------------------- ----- ----------------------- - --------------- -------------- ---------------------------------- ------- ---------------- -- --------------- --
4. 总结
使用简单易懂的规则和强大的Reselect选择器,erschema-redux-immutable使在Redux应用中处理数据的验证和规范化变得容易和愉快。通过在Redux Store中应用规则,可以防止不正确的数据进入应用程序并保持数据的规范化状态。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600563cb81e8991b448e1268