npm 包 redux-schema-sanitizing-reducer 使用教程

简介

redux-schema-sanitizing-reducer 是一个用于数据验证和清洗的 Redux reducer 的 npm 包。这个包可以帮助开发者创建一个 reducer,自动地验证和清洗数据,然后将它们放到 Redux 中。

这个包的原理是通过配置一个 JSON Schema 来表示数据结构的规范。当数据通过 Redux Action 传递到 reducer 时,该 reducer 将使用 JSON Schema 来验证数据,并清洗它们直到符合要求。最后,清洗过的数据将放入 Redux store 中。

使用这个包可以帮助开发者更好地管理数据,并减少应用程序的 bug 数量。同时,使用 JSON Schema 也使应用程序的数据结构更为清晰简单。

安装

安装 redux-schema-sanitizing-reducer 非常容易。

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

使用方法

首先,需要引入 redux-schema-sanitizing-reducer。

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

然后,需要使用 createSanitizingReducer 创建一个新的 reducer。这个 reducer 接收 2 个参数:JSON Schema 和原始 reducer。

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

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

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

在这个示例中,JSON Schema 检查了传递给 reducer 的数据是否为一个对象,同时 name 是必需的,而 age 必须为一个大于或等于 0 的数字。

如果 reducer 接受到了一个包含不符合规范的 name 或 age 的对象,redux-schema-sanitizing-reducer 将首先删除无用的属性,然后将必需的属性设置为 null 或空字符串(如果支持的话)。如果必需的属性在第一次过滤后仍然不符合规范,则会抛出一个错误。

最后,使用 sanitizingReducer 替代原始 reducer。

现在,sanitizingReducer 将在处理每个 action 前进行数据验证和清洗。如果数据不符合规范,sanitizingReducer 不会将其写入 Redux store 中。

示例代码

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

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

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

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

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

结论

在这篇文章中,我们介绍了 redux-schema-sanitizing-reducer 这个 npm 包,并提供了一个简单的使用示例。通过使用这个包,你可以更好地管理你应用程序的数据,减少错误和 bug 的数量,并使用 JSON Schema 更好地清晰和简化数据结构。

使用 JSON Schema 进行数据验证和清洗是一个十分强大和灵活的工具,尤其是在使用 Redux 管理状态时。这使得进程更为安全,能够更好地处理数据。我们鼓励开发者在他们的应用程序中使用它。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/60067007e361a36e0bce8ac2


猜你喜欢

  • npm 包 redux-ssr-fetch 使用教程

    简介 在 React 的服务器端渲染中,需要在服务端获取数据后再进行页面渲染,而 Redux 作为 React 状态管理的一种解决方案也有着强大的异步数据处理能力。

    4 年前
  • npm 包 egg-user-agent 使用教程

    简介 egg-user-agent 是 Egg.js 框架中的一个中间件,它用于获取客户端的 user-agent 信息,该信息常常用于用于识别客户端的浏览器类型、操作系统类型以及版本号等信息。

    4 年前
  • npm 包 redux-dynamic-middlewares-2 使用教程

    常规的 redux middleware 在前端开发中,我们经常使用 redux 来管理应用的状态。而 redux middleware 则是为了扩展 redux 的功能,它会在每个 action 发...

    4 年前
  • NPM 包 `redux-dynamix` 使用教程

    redux-dynamix 是一个 Redux 中间件,它提供了动态注册和注销 Redux store 的能力,是一种优秀的解决方案。本教程将介绍如何使用 redux-dynamix 来编写可扩展的 ...

    4 年前
  • npm 包 redux-easy-actions 使用教程

    在前端开发中,Redux 作为一种状态管理工具被广泛应用于复杂的应用场景。由于 Redux 本身代码量较多、实现机制略微复杂,我们需要更高效的方式来使用 Redux。

    4 年前
  • NPM 包 Redux-easy-crud 使用教程

    Redux-easy-crud 是一个简单且优雅的实现增删改查的 CRUD 库,可以更方便地处理 JSON 数据。 安装 可以使用 npm 或 yarn 安装: --- ------- -------...

    4 年前
  • npm 包 redux-act-async 使用教程

    在现代的前端开发中,状态管理成了一个不可避免的问题,而 Redux 是一个非常流行的状态管理工具。基于 Redux,衍生出了许多实用的工具包,其中就包括了 redux-act-async 这个 npm...

    4 年前
  • npm 包 redux-dumb-router 使用教程

    在前端开发中,使用路由是非常常见的需求。而 redux-dumb-router 就是一个帮助前端开发者更加方便地管理路由的 npm 包。本篇文章将为大家介绍 redux-dumb-router 的使用...

    4 年前
  • npm 包 redux-act-reducer 使用教程

    介绍 redux-act-reducer 是一个帮助 React 应用程序更容易地管理状态的 npm 包。这个包简化了编写 reducer 函数的过程,使其更加易于阅读和维护。

    4 年前
  • NPM 包 redux-act-async-api 使用教程

    Redux 是一种基于 Flux 架构的 JavaScript 应用程序状态容器。它通常用于管理前端应用程序中的全局状态。redux-act-async-api 是一个开源的 npm 包,它是 red...

    4 年前
  • npm 包 redux-actions 的使用教程

    前言 Redux 是一款非常流行的前端状态管理库,它的思想是将应用中的所有状态抽象成一个状态树,并将修改状态的操作统一成一个个可预测的 action。Redux-actions 是专门为 Redux ...

    4 年前
  • npm 包 redux-action-chain 使用教程

    简介 redux-action-chain 是一个用于管理 Redux 异步操作的第三方 npm 包。它的作用是对 Redux 中的 action 进行链式处理,使得开发者可以轻松地进行连续性操作和管...

    4 年前
  • npm 包 redux-action-binder 使用教程

    简介 redux-action-binder 是一个用于在 Redux 中绑定 action 和 reducer 的工具库,它可以让你在不写冗余代码的情况下创建 action 和 reducer,并将...

    4 年前
  • npm 包 redux-action-class-middleware 使用教程

    介绍 redux-action-class-middleware 是一个 npm 包,基于 Redux 中间件机制,支持在 Redux 中注册 Class 作为 Action Creator,方便地实...

    4 年前
  • NPM 包 Redux-Action-Creator 使用教程

    1. 什么是 Redux-Action-Creator ? Redux-Action-Creator 是一个用于简化 Redux 开发的包,可以更快地创建 Redux 动作并移除模板代码。

    4 年前
  • npm 包 redux-network-middleware 使用教程

    简介 redux-network-middleware 是一个基于 Redux 的中间件,它用于处理异步请求和响应,包括网络请求和其他 IO 操作,其主要特点包括: 简单易用,提供了统一的 API,...

    4 年前
  • npm 包 redux-newrelic 使用教程

    简介 redux-newrelic 是一个能够将 Redux 应用程序与 New Relic 集成的 npm 包。通过使用 redux-newrelic,开发人员可以更轻松地监控其 Redux 应用程...

    4 年前
  • NPM 包 redux-normalized-api-middleware 使用教程

    在前端开发中,API 及其返回数据通常需要经过处理和管理。redux-normalized-api-middleware 就是一款解决 API 数据处理和规范化的工具,能够有效地管理和规范前端项目的数...

    4 年前
  • npm 包 redux-next 使用教程

    Redux 是一个非常流行的状态管理框架,但是在大型项目中,Redux 可能会变得臃肿和复杂。为了解决这个问题,社区推出了许多不同的解决方案。其中一个解决方案就是使用 npm 包 redux-next...

    4 年前
  • npm包redux-normalize-middleware使用教程

    在现代Web应用程序中,管理应用程序状态非常重要。 Redux是一种流行的解决方案,它提供了一种有效的方法来管理应用程序的状态。 Redux在许多应用程序中使用,但是Redux的目的在于管理大型应用程...

    4 年前

相关推荐

    暂无文章