如何在React Redux中使用Typicode JSON Server获取数据及解决启动报错

1. 解决PowerShell执行策略报错 #

你遇到的报错是Windows PowerShell默认禁止运行未签名的第三方脚本导致的，可选择以下任意一种方案解决：

• 方案一（修改系统执行策略）：
  1. 以管理员身份启动Windows PowerShell
  2. 运行命令 Set-ExecutionPolicy RemoteSigned
  3. 弹出确认提示时输入Y回车即可，后续可正常运行全局安装的json-server命令
• 方案二（无需修改系统设置，更推荐）：
  直接使用npx运行json-server，无需全局安装也不会触发执行策略限制，后续所有启动命令都用npx前缀即可。

2. 调整JSON文件结构 #

json-server要求JSON文件根结构为对象，对象的键就是接口的访问路由，你当前的items.json是数组结构，需要调整为如下格式：

{
  "items": [
    {
      "tags": [
        "Trees"
      ],
      "price": 10.99,
      "name": "Handcrafted Trees Mug",
      "description": "enim corporis voluptatibus laudantium possimus alias dolorem voluptatem similique aut aliquam voluptatem voluptatem omnis id consequatur",
      "slug": "Handcrafted-Trees-Mug",
      "added": 1485723766805,
      "manufacturer": "OHara-Group",
      "itemType": "mug"
    },
    {
      "tags": [
        "Beach",
        "Ocean",
        "Water"
      ],
      "price": 19.99,
      "name": "Rustic Beach Mug",
      "description": "totam at veritatis eligendi assumenda ex quia praesentium quibusdam ducimus",
      "slug": "Rustic-Beach-Mug",
      "added": 1481573896833,
      "manufacturer": "Sipes-Inc",
      "itemType": "mug"
    }
  ]
}

你也可以把键名items改成你需要的products等其他名称，对应修改后续的接口路径即可。

3. 启动json-server服务 #

在项目根目录打开终端，运行以下命令（如果用方案二就直接运行这条）：

npx json-server --watch src/items.json --port 3001

参数说明：

• --watch src/items.json：指定要监听的JSON文件路径，因为你的文件放在src目录下，所以要写全路径
• --port 3001：指定服务运行端口为3001，避免和前端项目默认的3000端口冲突

启动成功后，你可以在浏览器访问http://localhost:3001/items验证数据是否能正常返回。

4. 修改请求action代码 #

把你代码中Axios.get的请求地址填写为上述接口地址即可，修改后代码如下：

import Axios from 'axios';
import {
  PRODUCT_LIST_FAIL,
  PRODUCT_LIST_REQUEST,
  PRODUCT_LIST_SUCCESS,
} from '../constants/productConstants';

export const listProducts = () => async (dispatch) => {
  dispatch({
    type: PRODUCT_LIST_REQUEST,
  });
  try {
    const { data } = await Axios.get('http://localhost:3001/items');
    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
  } catch (error) {
    dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
  }
};

注意事项 #

• 运行json-server的终端不要关闭，关闭后服务会停止
• 如果你修改了items.json的键名，需要把接口地址里的items替换为你设置的键名

内容的提问来源于stack exchange，提问作者magic bean