在 reactjs 中，如何从其他文件中的 fetch() 获取响应

Question

我想从服务器的数据库中检索数据。

在文件A中我调用fetch(url)然后我希望在文件B中得到响应，这可能吗？

当时当我使用 electronJS 时，这可以通过使用ipcRenderer.on('channel', function); 轻松实现。

所以在文件A中，我使用ipcRenderer.send('channel', someData);获取数据，然后通过声明ipcRenderer.on('channel', function(result));接收到文件B中的数据。

现在我没有使用 electronJS，因为我打算构建一个 Web 应用程序，据我所知，我可以使用 fetch(url) 从数据库中获取数据，但问题是我不知道如何在其他应用程序中接收数据文件。

如果您需要更多解释，请告诉我。

添加示例代码：

我从这里得到这个示例代码：https://stackoverflow.com/a/48381103/9177853 类似的问题，但不完全相同。

在文件A中：

export const getData = () => fetch("https://api.myjson.com/bins/mp441")
  .then(response => response.json())

在文件B中：

import { getData } from './path/to/getData.js';

const someFunc = () => {
   getData().then(data => {
       // set redux state
       this.props.setReduxState(data);
   })
}

但文件B不会自动监听传入的data响应，因此将数据存储到redux状态，无需显式调用someFunc();。

我想要的只是在 file A 中单击按钮调用fetch(url)，file B 随时准备收听传入响应然后存储响应数据到 redux 商店。

Answer 1

你想要的都是可能的，听起来像是组件间的通信，添加示例代码，希望你能得到一些帮助。您将组件 A（文件 A）写入组件 B（文件 B）所依赖的 state。

从您的示例代码更新。

1. 如果您打算使用 Redux：请查看redux action and reducer。它需要一些初始设置。

2. 如果你的应用很小，我建议你看看 react hooks useReducer and useState.

3. 如果您的应用程序相对较小并且您不想让专业人士失望，您也可以在 react 中使用 the context API。

4. 最后，您可能根本不需要状态管理工具。我建议您创建一个根组件并将所有数据存储在其状态中，并让其子组件更新并使用该状态。这很容易通过一些阅读来实现。你可以check one my repo that does it here