处理获取的数据 - RTK 查询/Redux 工具包/React

Mar*_*nti 5 reactjs react-redux redux-toolkit rtk-query

我对所有提到的技术都很陌生,我试图了解在这种情况下应该如何操作:我正在尝试从 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,
      ...
Run Code Online (Sandbox Code Playgroud)

这可能有效,但我会对如何调度操作来改变这种状态感到困惑。

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

任何帮助都是极好的!

phr*_*hry 10

RTK 查询状态并不意味着是在客户端本地更改的状态 - RTK 查询是纯缓存。

它适用于您的工作流程

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

RTK-Query 的目的是使该过程尽可能简单,并接管诸如在服务器上触发某些更改后自动重新获取以及从缓存中删除旧值之类的操作。

如果您想在本地保存数据以对其进行本地更改,您应该使用传统的切片。