处理获取的数据 - RTK Query / Redux Toolkit / React

Question

我对所有提到的技术都是新手，我正在尝试理解在这种情况下应该如何操作：我想从API中获取一个CSV文件，一旦检索到了，我想要处理它并将其转换成类似于JSON的对象，然后可以在我的某个组件中使用它。例如，我想在表格中查看这些数据并对这些数据执行操作，从而导致该数据的状态发生变化。

从文档中，每个已定义的端点都有一个transformResponse字段，我可以使用它来规范化我应用程序所需的数据。

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post'],
  endpoints: (build) => ({
    getPost: build.query<Post, number>({
      // note: an optional `queryFn` may be used in place of `query`
      query: (id) => ({ url: `post/${id}` }),
      // Pick out data and prevent nested properties in a hook or selector
      transformResponse: (response: { data: Post }) => response.data,
      ...

这个方法可能可行，但是我会对如何分派操作以更改此状态感到困惑。

另一种解决方案是使用Redux Toolkit存储片段保存获取的数据，并执行转换操作和分发操作。

任何帮助都将非常棒！

- Marco Ripamonti

Answer 1

RTK Query状态不应该在客户端本地更改，因为RTK Query是一个纯缓存。

它适用于以下工作流程：

• 从服务器获取数据
• 显示该数据
• 向服务器发送更改请求
• 从服务器获取新数据
• 再次显示该数据

RTK-Query的目的是尽可能地简化该过程，并接管诸如在服务器上触发更改后自动重新获取和从缓存中删除旧值等任务。

如果您想要在本地保留数据以进行本地更改，则应使用传统的slice。

- phry

---

我明白了，感谢您的解释。那么您建议采用什么方式呢？是普通的fetch还是axios请求，然后像您建议的那样使用存储切片？ - Marco Ripamonti

如果您的所有其他API交互都遵循上述模式，那么您可以使用RTK-Query并使用extraReducer将数据复制到您的切片中进行一次性操作。否则，RTK-Query就不是适合您的工具，您需要坚持使用传统的方式进行正常的获取->手动将数据放入切片中。 - phry

@phry，RTKQ 的优点在于它可以完全管理数据获取，因此尽管“浪费”了其他众多缓存功能，但使用 RTKQ 进行数据获取并在本地使用 extraReducer 处理似乎是一种相当不错的应用程序设置方式，即使这不是 RTKQ 的确切预期用例。 - Jonathan Tuzman

真的，但现在像“我什么时候从我的切片中删除这个”这样的事情完全取决于你，但最终会更难实现。因此，如果只是复制一点内容，我认为还可以，但我不会在此基础上构建完整的应用程序。 - phry

@Azeirah，你误解了答案。Mutation的目的是在服务器上编辑某些内容，然后通过重新触发所有相关查询从服务器获取数据。你永远不会在客户端状态中编辑任何内容，更改会自动从服务器返回到客户端。 - phry