时间戳

首页 > 解决方案 > 如何使用 React Redux 使用 typicode json 服务器获取数据

reactjs - 如何使用 React Redux 使用 typicode json 服务器获取数据

问题描述

我的 src 文件夹下有一个名为 items.json 的 JSON 文件：

[
  {
    "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"
  }, ...
]

所以我必须使用 typicode json 服务器来获取这些数据，但我从未使用过它，所以我不明白该怎么做。https://github.com/typicode/json-server

我已经为这个请求准备好了行动，但如果你给我一些使用它的提示，我会很高兴。这是我的行动：

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('');
    dispatch({ type: PRODUCT_LIST_SUCCESS, payload: data });
  } catch (error) {
    dispatch({ type: PRODUCT_LIST_FAIL, payload: error.message });
  }
};

那么我应该如何获取数据呢？

我试图运行这个命令 json-server --watch items.json 但我得到了这个错误：

json-server ：文件 C:\Users\Lenovo\AppData\Roaming\npm\json-server.ps1 无法加载，因为在此系统上禁用了运行脚本。有关详细信息，请参阅 https://go.microsoft.com/fwlink/?LinkID=135170 上的 about_Execution_Policies。

标签： reactjsreduxreact-reduxfetch-apijson-server

解决方案

推荐阅读