在前端开发中，我们常常会使用 Mock 数据来模拟后端接口的返回值，以便于前端开发人员在没有后端接口支持的情况下进行开发和测试。而在使用 Redux 进行状态管理的前端项目中，我们同样可以使用 Mock 数据来模拟接口返回值，以便于进行调试和测试。
本文将介绍在 Redux 中使用 Mock 数据的方法，并给出具体的示例代码，希望能够帮助到大家。
使用 Mock.js 生成 Mock 数据
首先，我们需要使用一个 Mock 数据库来生成模拟数据。这里我们选择使用比较流行的 Mock.js 库。
Mock.js 是一个用于生成随机数据的库。它支持生成各种类型的数据，如字符串、数值、布尔值等，并且可以根据一定的规则来生成符合需求的数据。
比如，我们可以使用 Mock.js 来生成一个包含 10 个用户信息的数组：
-- -------------------- ---- -------
----- ---- - ------------------
----- ---- - -----------
----------- --
-------- --
------- ---------
------------ --
----------- ----- -----
---------- --------
---
---
------------------这里，我们使用了 Mock.mock() 方法来生成一个 Mock 数据对象。其中，users 是一个数组，数组长度为 10；每个数组元素都是一个包含 id、name、age、gender 和 address 字段的对象。其中，id 字段从 1 开始，每次自增 1；name 字段随机生成一个中文名字，age 字段随机生成一个 18 到 60 之间的年龄，gender 字段随机生成一个男或女，address 字段随机生成一个地址。
输出结果如下：
-- -------------------- ---- -------
-
-------- -
-
----- --
------- -----
------ ---
--------- ----
---------- -----
--
---
-
----- ---
------- ------
------ ---
--------- ----
---------- -----
-
-
-在 Redux 中使用 Mock 数据
接下来，我们将介绍如何在 Redux 中使用 Mock 数据来模拟接口返回值。
假设我们有一个使用 Redux 进行状态管理的应用，其中有一个 user 模块，负责管理用户信息。现在我们要使用 Mock 数据来模拟获取用户信息的接口返回值。
编写 action creator
首先，我们需要编写一个用于创建 GET_USER action 的 action creator，它将在获取用户信息成功后被调用。
const GOT_USER = 'GOT_USER';
function gotUser(user) {
return {
type: GOT_USER,
payload: user,
};
}编写 reducer
接下来，我们需要编写一个 reducer，将 GOT_USER action 中的用户信息更新到状态中。
-- -------------------- ---- -------
----- ------------ - -
----- ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------- -
------ -
---------
----- ---------------
--
-
--------
------ ------
-
-编写 mock 接口
现在，我们需要编写一个 Mock 接口来模拟获取用户信息的请求，并使用 Mock 数据作为返回值。
-- -------------------- ---- -------
----- ---- - ------------------
-------- ------------------- -
--------------------------- ----- ---- -- -
----- - -- - - -----------
----- ---- - -----------
----- -----------
------- ---------
------------ --
----------- ----- -----
---------- --------
---
------------- -- -
---------------
-- ------
---
-这里，我们使用了 Express 中间件的方式编写 Mock 接口。它将拦截所有以 /api/user/:id 开头的请求，并根据请求的 id 参数生成一个包含 id、name、age、gender 和 address 字段的用户对象，并返回给前端。为了模拟真实的请求时间，这里使用了 setTimeout 方法来延迟 1 秒钟，以便于更好地测试异步请求的情况。
编写 async action creator
最后，我们需要编写一个 async action creator，用于发出获取用户信息的请求，并将获取到的用户信息通过 gotUser action creator 更新到状态中。
-- -------------------- ---- -------
-------- ----------- -
------ ----- ---------- -- -
--- -
----- -------- - ----- -------------------------
----- ---- - ----- ----------------
------------------------
- ----- ----- -
-------------------
-
--
-这里，我们使用了 fetch 方法来发出异步请求，并使用 await 关键字等待请求返回。如果请求成功，我们将请求返回的 JSON 数据通过 json() 方法解析成一个 JavaScript 对象，并将解析后的用户信息对象通过 gotUser action creator 更新到状态中。
完整代码示例
下面是完整的代码示例，其中包含了 action creator、reducer、Mock 接口和 async action creator：
-- -------------------- ---- -------
----- ---- - ------------------
----- -------- - -----------
-------- ------------- -
------ -
----- ---------
-------- -----
--
-
----- ------------ - -
----- ---
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- --------- -
------ -
---------
----- ---------------
--
-
--------
------ ------
-
-
-------- ------------------- -
--------------------------- ----- ---- -- -
----- - -- - - -----------
----- ---- - -----------
----- -----------
------- ---------
------------ --
----------- ----- -----
---------- --------
---
------------- -- -
---------------
-- ------
---
-
-------- ----------- -
------ ----- ---------- -- -
--- -
----- -------- - ----- -------------------------
----- ---- - ----- ----------------
------------------------
- ----- ----- -
-------------------
-
--
-
------ -
------------
------------
--------
--总结
通过本文的介绍，我们了解了如何使用 Mock.js 生成随机数据，并在 Redux 中使用 Mock 数据来模拟接口返回值。这对于前端开发人员在没有后端接口支持的情况下进行开发和测试非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6471f7a2968c7c53b0fdf949