ProductSlice

    0

    0

    In order to use the product adapter, we first need to import it and create an instance of it. Next, we need to provide a selector function that will be used to select products from the database. The selectAll and selectById methods will be used to select all products in the database or a particular product, respectively.

    Finally, we need to provide a function that will be used to create a new instance of the product adapter and inject it into our state. This function will be used to transition our state from the initial state to the newly selected state.

    import { createEntityAdapter, createSelector } from "@reduxjs/toolkit";
    import { apiSlice } from "../api/apiSlice";
    
    const productAdapter = createEntityAdapter({
      selectId: (product) => product.id,
      sortComparer: (a, b) => a.id.localeCompare(b.id),
    });
    
    const initialState = productAdapter.getInitialState();
    
    export const productSlice = apiSlice.injectEndpoints({
      endpoints: (builder) => ({
        getProducts: builder.query({
          query: () => "/products",
          transformResponse: (responsData) => {
            return productAdapter.setAll(initialState, responsData);
          },
          transformErrorResponse: (responsData) => {
            console.log(responsData);
          },
          providesTags: (result, error, arg) => [{ type: "Product", id: "LIST" }],
        }),
        AddProduct: builder.mutation({
          query: (product) => ({
            url: "/products",
            method: "POST",
            body: product,
          }),
          transformResponse: (responsData) => {
            return productAdapter.addOne(initialState, responsData);
          },
          transformErrorResponse: (responsData) => {
            console.log(responsData);
          },
          invalidatesTags: (result, error, todo) => [
            { type: "Product", id: "LIST" },
          ],
        }),
        updateProduct: builder.mutation({
          query: (product) => ({
            url: `/products/${product.id}`,
            method: "PUT",
            body: product,
          }),
          transformResponse: (responseData) => {
            return productAdapter.updateOne(initialState, responseData);
          },
          transformErrorResponse: (responseData) => {
            console.log(responseData);
          },
          invalidatesTags: (result, error, todo) => [
            { type: "Product", id: "LIST" },
          ],
        }),
        deleteProduct: builder.mutation({
            query: (product) => ({
              url: `/products/${product.id}`,
              method: "DELETE",
              body: product,
            }),
            transformResponse: (responseData) => {
              return productAdapter.removeOne(initialState, responseData);
            },
            transformErrorResponse: (responseData) => {
              console.log(responseData);
            },
            invalidatesTags: (result, error, todo) => [{type: 'Product', id: 'LIST'}]
          }),
      }),
    });
    
    
    export const {
        useGetProductsQuery,
        useAddProductMutation,
        useUpdateProductMutation,
        useDeleteProductMutation
    } = productSlice
    
    export const selectProductResult = productSlice.endpoints.getProducts.select();
    
    export const selectProductData = createSelector(
        selectProductResult,
        (result) => result.data
    )
    
    export const {selectAll:selectAllProducts,selectById:selectProductById} =
    productAdapter.getSelectors(
        (state) => selectProductData(state)??initialState
    )
    
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.