【问题标题】:Typescript - React/Redux to display tableTypescript - React/Redux 显示表格
【发布时间】:2019-07-02 04:45:34
【问题描述】:

我想构建一个 react typescript redux 应用程序以使用https://example.com/users 提供的 api 端点显示表格

开发一个包含 4 列 Name、Email、City 和 Company 的表,用来自 api 端点的响应填充行。

我是菜鸟,所以请耐心等待。

1) 我需要使用某种数据库来制作表格是吗? (即带有猫鼬的 mongoDb)

2) Redux/Redux-Thunk 用于存储状态并能够编写返回函数的动作创建器。 Thunk 可用于延迟分派的操作或用于条件。

如果我们只是返回数据,不确定使用 Redux 做什么。

同样的情况需要返回 JSON 格式的数据,这种情况下 Thunk 有什么用呢? (硬件分配)

需要返回的示例:

JSON

[{
  "id": 1,
  "name": "Jane Doe",
  "username": "JD",
  "email": "jd@april.biz",
  "address": {
    "street": "Kulas Light",
    "suite": "Apt. 425",
    "city": "Dogville",
    "zipcode": "89143-3874",
    "geo": {
      "lat": "-37.3159",
      "lng": "81.1496"
    }
  },
  "phone": "1-555-555-8031 x55555",
  "website": "sample.org",
  "company": {
    "name": "Munder Difflin",
    "catchPhrase": "Multi-layered client-server neural-net",
    "bs": "harness real-time e-markets"
  }
}]

【问题讨论】:

  • 嘿,@mflow 你的问题是关于你可以在任何网站上检查的东西的功能,比如 redux 做什么,thunk 做什么。如果您有任何与您的需求相关的查询。您应该发送最少的代码、您尝试过的内容等。然后只有我们可以提供帮助。我猜这个网站不适合用勺子喂食。
  • 虽然使用 redux 不是强制性的。您可以不使用 redux,而只需使用状态即可。 thunk 是一个中间件。当然你需要一个数据库
  • 明白了,我的任务只需要我使用 redux。我了解中间件部分并需要一个数据库。但是当我弄清楚这一点时,我会用一些东西来修改这个问题。谢谢。
  • 简而言之,redux 将简化应用程序不同部分的数据可用性。使用它,您将能够使用您的状态作为道具,它会减少状态的数量。
  • 你将有 action 和 reducer 来执行任务。

标签: javascript reactjs typescript redux jestjs


【解决方案1】:

如果没有人真正为你完成作业,这个问题甚至可能无法回答,因此放弃了学习过程。

将 React/Redux/Typescript/Thunk 设置为 Junior?祝你好运。

如果您只是从 API 获取数据并将其放在 UI 上的表格中,则无需涉及数据库;此外,无需涉及 redux 或 thunk,这些工具更适合人们在大型应用程序中的许多组件之间全球共享状态。

但不要只相信我的话,这里有一些 React 的创建者的话。 https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367

在显示表格方面;这是我可以在下面提供的帮助,我提供了一个代码笔,用于生成作业所需的表格;用它作为指导。

https://codepen.io/anon/pen/qzowyP?editors=1111

特意设计了它的样式并使其非常简约。

goodluck and hope this helps.

编辑:如果您只是从 external api 获取数据并显示它,则无需涉及数据库,但是如果您希望自己创建此 API,那么显然会改变事情

【讨论】:

  • 感谢您的回答,我相信我现在明白了,您已经弄清楚了一些事情。
  • 请接受这个作为答案,如果你不介意我可以加分
猜你喜欢
  • 2021-12-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2018-03-19
  • 2020-08-04
  • 2019-12-19
  • 2021-11-22
  • 2018-03-16
相关资源
最近更新 更多