使用 RTK Query 构建更好的 React 状态管理架构

前端

2024-02-23 06:53:49

在 SPA 应用中，前端需要管理大量的客户端状态与异步数据获取状态。近年来，React 社区意识到，客户端状态管理与数据获取与缓存是两个不同的关注点，需要分离。因此，RTK 作为兼备两者能力的工具出现了。

RTK Query 简介

RTK Query 是 Redux Toolkit 的一部分，它提供了一种简单而强大的方式来管理 React 应用程序中的数据获取和缓存。它具有以下优点：

易于使用： RTK Query 具有简洁的 API，非常易于学习和使用。
强大的缓存功能： RTK Query 具有强大的缓存功能，可以有效地减少重复的数据请求，提高应用程序的性能。
可扩展性强： RTK Query 非常适合构建大型、可扩展的 React 应用程序。

RTK Query 的用法

使用 RTK Query 非常简单，只需按照以下步骤即可：

安装 RTK Query：

npm install @reduxjs/toolkit

创建一个 RTK Query API 服务：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';

const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: 'https://example.com/api' }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => '/posts',
    }),
  }),
});

在组件中使用 RTK Query：

import { useGetPostsQuery } from './api';

const Posts = () => {
  const { data, isLoading, error } = useGetPostsQuery();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>{error.message}</div>;
  }

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

RTK Query 与 Redux Toolkit 的结合使用

RTK Query 可以与 Redux Toolkit 结合使用，以构建更具可扩展性和可维护性的 React 项目。以下是如何将 RTK Query 与 Redux Toolkit 结合使用：

安装 Redux Toolkit：

npm install @reduxjs/toolkit

创建一个 Redux store：

import { configureStore } from '@reduxjs/toolkit';
import { api } from './api';

const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(api.middleware),
});

在组件中使用 Redux Toolkit：

import { useSelector, useDispatch } from 'react-redux';
import { api } from './api';

const Posts = () => {
  const posts = useSelector((state) => state[api.reducerPath].posts);
  const dispatch = useDispatch();

  const getPosts = () => {
    dispatch(api.endpoints.getPosts.initiate());
  };

  return (
    <div>
      <button onClick={getPosts}>Get Posts</button>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
};