npm 包 `redux-action-schema` 使用教程

前言

在使用 Redux 作为前端状态管理库时，我们需要遵循一些约定，例如通过定义 action type 来区分不同的 Action，并且需要遵循 action 触发 reducer 的流程，这往往需要写大量重复的代码且容易出错。redux-action-schema 这个 npm 包就是为了解决这个问题而诞生的。

redux-action-schema 可以帮助我们定义一种规范化的 Action 类型，通过验证机制来确保 Action 属性的正确性，以及自动生成 action creator 和常规可以使用的 ActionTypes。这个包的核心思想就是转化为使用面向对象的思想，将重复的代码抽象及封装起来，简化代码，提高可读性，可维护性和可扩展性。

在本篇文章里，我将详细地讲解如何使用 redux-action-schema 包，希望本文可以对你有所帮助。

安装和使用

安装

npm install redux-action-schema --save

引入

import createActionSchema from "redux-action-schema";

定义 ActionType

我们需要先定义一个 schema，一个 schema 定义了一个 ActionTypes 对象和对应的 Action 构造函数。

const mySchema = createActionSchema("MY_SCHEMA", {
  foo: String,
  bar: Number,
});

从上面的示例代码可以看出，我们定义了一个名为 MY_SCHEMA 的 schema，它具有两个属性 foo 和 bar，它们分别是字符串和数字类型。

使用 ActionType

我们可以像使用普通的 ActionType 一样使用 MY_SCHEMA：

const myAction = mySchema.create({ foo: "hello", bar: 123 });
console.log(myAction);

通过 mySchema.create() 方法，我们可以创建一个符合 MY_SCHEMA 定义的 action，在控制台上可以看到输出如下：

{
  type: 'MY_SCHEMA',
  payload: {
    foo: 'hello',
    bar: 123
  }
}

错误提示

如果输入的 Action 包含了错误的属性或类型，create 方法会抛出一个错误，错误信息说明了哪个属性出错了：

const myAction = mySchema.create({ foo: "hello", bar: "wrongType" });
// throws an error: Invalid argument at index 1: expected Number but got String

reducer 简化

在 reducer 内部，通过使用 switch case 语句来处理不同类型的 Action，而通过 redux-action-schema，我们可以使用 handleAction() 方法来简化 reducers：

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

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

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

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

使用 handleAction() 方法可以极大地简化 reducer，减少冗余代码。

总结

本文讲解了 redux-action-schema 的基本使用、属性定义、ActionType 使用以及如何简化 Reducer 操作。通过使用 redux-action-schema，我们可以大大简化 Redux 的使用，并且将语法规范化，减少人为错误。希望本文可以对你有所帮助。

参考资料

• redux-action-schema GitHub Repo

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067009e361a36e0bce8c0e