Cách tìm nạp dữ liệu trong React bằng truy vấn bộ công cụ Redux

Cài đặt các phụ thuộc cần thiết

Khi bạn đã thiết lập và chạy dự án React của mình, hãy tiếp tục và cài đặt các gói sau.

 npm install @reduxjs/toolkit react-redux 

Xác định một API Slice

Một lát API là một thành phần bao gồm logic Redux cần thiết để tích hợp và tương tác với các điểm cuối API được chỉ định. Nó cung cấp một cách tiêu chuẩn hóa để xác định cả điểm cuối truy vấn để tìm nạp dữ liệu và điểm cuối đột biến để sửa đổi dữ liệu.

Về cơ bản, một phần API cho phép bạn xác định các điểm cuối để yêu cầu và thực hiện các thay đổi đối với dữ liệu từ một nguồn cụ thể, cung cấp một cách tiếp cận hợp lý để tích hợp với các API.

bên trong src thư mục, tạo một thư mục mới và đặt tên cho nó, đặc trưng. Trong thư mục này, tạo một tệp mới: apiSlice.jsvà thêm đoạn mã dưới đây:

 import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});
export const { useGetAllProductsQuery , useGetProductQuery } = productsApi; 

Mã này xác định một lát cắt API được gọi là sản phẩmApi sử dụng Bộ công cụ Redux tạoApi chức năng. Lát API có các thuộc tính sau:

• MỘT đường dẫn giảm tốc property – đặt tên của bộ giảm tốc trong cửa hàng Redux.
• Các truy vấn cơ sở thuộc tính – chỉ định URL cơ sở cho tất cả các yêu cầu API bằng cách sử dụng tìm nạpBaseQuery chức năng được cung cấp bởi Redux Toolkit.
• API điểm cuối – chỉ định các điểm cuối có sẵn cho phần API này bằng cách sử dụng người xây dựng sự vật. Trong trường hợp này, mã xác định hai điểm cuối.

Cuối cùng, hai hook được tạo ra từ sản phẩmAPI đối tượng xác định hai điểm cuối. Bạn có thể sử dụng các hook này trong các thành phần React khác nhau để thực hiện các yêu cầu API, truy xuất dữ liệu và thay đổi trạng thái để đáp ứng với tương tác của người dùng.

Cách tiếp cận này hợp lý hóa việc quản lý trạng thái và tìm nạp dữ liệu trong ứng dụng React.

Định cấu hình Cửa hàng Redux

Sau khi tìm nạp dữ liệu từ API, Truy vấn RTK sẽ lưu trữ dữ liệu trong kho lưu trữ Redux. Trong trường hợp này, cửa hàng đóng vai trò là trung tâm trung tâm để quản lý trạng thái của các yêu cầu API được tạo từ ứng dụng React, bao gồm cả dữ liệu được truy xuất từ ​​các yêu cầu API đó để đảm bảo các thành phần truy cập và cập nhật dữ liệu này khi cần.

Trong thư mục src, tạo một cửa hàng.js tệp và thêm các dòng mã sau:

 import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";
export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
}); 

Mã này tạo một cửa hàng Redux mới, với hai phần cấu hình chính:

1. giảm tốc: Điều này xác định cách cửa hàng sẽ xử lý các cập nhật cho trạng thái. Trong trường hợp này, các sản phẩmApi.reducer được chuyển vào dưới dạng hàm giảm tốc và được cấp một khóa reducerPath duy nhất để xác định nó trong trạng thái chung của cửa hàng.
2. Phần mềm trung gian: Điều này xác định bất kỳ phần mềm trung gian bổ sung nào sẽ áp dụng cho cửa hàng.

Kết quả cửa hàng đối tượng là một cửa hàng Redux được định cấu hình đầy đủ, có thể được sử dụng để quản lý trạng thái của ứng dụng.

Bằng cách định cấu hình cửa hàng theo cách này, ứng dụng có thể dễ dàng quản lý trạng thái của các yêu cầu API và xử lý kết quả của chúng theo cách được tiêu chuẩn hóa bằng Bộ công cụ Redux.

Tạo một thành phần để triển khai chức năng RTK

Trong thư mục src, tạo mới các thành phần thư mục với một tập tin mới bên trong: Dữ liệu.js.

Thêm mã này vào tệp Data.js:

 import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";
export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);
  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };
  return (
    <div className="product-container">
      <button className="product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      <label className="product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        <ul>
          {productsData.slice(0, 4).map((product) => (
            <li className="product-details" key={product.id}>
              <p>Name: {product.title}</p>
              <p>Description: {product.description}</p>
              <p>Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};
 

Mã này minh họa một thành phần React sử dụng hook useGetAllProductsQuery do lát cắt API cung cấp để truy xuất dữ liệu từ điểm cuối API đã chỉ định.

Khi người dùng nhấp vào nút Hiển thị dữ liệu, chức năng handleDisplayData sẽ thực thi, gửi yêu cầu HTTP tới API để truy xuất dữ liệu sản phẩm. Sau khi nhận được phản hồi, biến dữ liệu của sản phẩm được cập nhật với dữ liệu phản hồi. Cuối cùng, thành phần hiển thị danh sách chi tiết sản phẩm.

Cập nhật Thành phần ứng dụng

Thực hiện các thay đổi sau đối với mã trong tệp App.js:

 import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";
function App() {
  return (
    <Provider store={store}>
      <ApiProvider api={productsApi}>
        <div className="App">
          <Data />
        </div>
      </ApiProvider>
    </Provider>
  );
}
export default App;
 

Mã này bao bọc thành phần Dữ liệu với hai nhà cung cấp. Hai nhà cung cấp này cấp cho thành phần quyền truy cập vào cửa hàng Redux và các tính năng Truy vấn RTK cho phép nó tìm nạp và hiển thị dữ liệu từ API.

Thật dễ dàng để định cấu hình Truy vấn Bộ công cụ Redux để truy xuất dữ liệu một cách hiệu quả từ một nguồn được chỉ định với mã tối thiểu. Ngoài ra, bạn cũng có thể kết hợp các chức năng để sửa đổi dữ liệu được lưu trữ bằng cách xác định các điểm cuối đột biến trong thành phần lát API.

Bằng cách kết hợp các tính năng của Redux với khả năng tìm nạp dữ liệu của RTK, bạn có thể có được giải pháp quản lý trạng thái toàn diện cho các ứng dụng web React của mình.