Redux store vs Redux API queries

In our company, a dispute arose on the topic of how and where it is better to store and reuse data. Opinions were divided. Here I will give an example.

We have a queue of requests The first request is to obtain vehicle data by its Transmission ID. The second request is to get a gallery of links to pictures for the Interior and Exterior. The third request is to get links to a gallery of 360 degree images for the Interior and Exterior.

One team's solution was this:

Api config

// bapApi.ts

const bapApi = createApi({
  reducerPath: 'bapApi',
  baseQuery: fetchBaseQuery(),
  endpoints: builder => ({
    getColorByTransmission: builder.query<BapImages | undefined, BapColorByTransmissionQueryArgs>({
      query: ({ url }) => ({ url }),
    }),
    getStudioAssetsById: builder.query<BapImages | undefined, BapStudioAssetsByIdQueryArgs>({
      query: ({ url }) => ({ url }),
    }),
    get360AssetsById: builder.query<BapImages | undefined, Bap360AssetsByIdQueryArgs>({
      query: ({ url, body }) => ({
        url,
        method: 'POST',
        body,
      }),
    }),
  }),
});

Main hook to chain requests

// useFetchLayoutServiceTransmission.ts

const useFetchLayoutServiceTransmission = ({ transmissionId }: { transmissionId?: string }) => {
  const dispatch = useDispatch();
  ...
  useEffect(() => {
    if (transmissionId) {
      dispatch(setTransmissionId(transmissionId));
    }
    return () => {
      dispatch(setTransmissionId(''));
    };
  }, [transmissionId]);

  // Get Transmission Section
  const {
    data: transmissionData,
    isFetching: isFetchingTransmission,
    isLoading: isLoadingTransmission,
    error: errorTransmission,
  } = useGetColorByTransmissionQuery(
    { url: getUrl(`/qwe/${transmissionId}`), transmissionId },
    { skip: !transmissionId },
  );

  // Studio Section
  const { interiorColorId, exteriorColorId } = useSelector(selectTransmissionColors);

  const {
    isFetching: isFetchingExteriorStudioAssets,
    isLoading: isLoadingExteriorStudioAssets,
    error: errorExteriorStudioAssets,
  } = useGetStudioAssetsByIdQuery(
    {
      url: getUrl(`/asd/${exteriorColorId}/studioAssets`),
      id: exteriorColorId,
      type: 'exteriorStudioAssets',
    },
    { skip: !exteriorColorId },
  );

  const {
    isFetching: isFetchingInteriorStudioAssets,
    isLoading: isLoadingInteriorStudioAssets,
    error: errorInteriorStudioAssets,
  } = useGetStudioAssetsByIdQuery(
    {
      url: getUrl(`/zxc/${interiorColorId}/studioAssets`),
      id: interiorColorId,
      type: 'interiorStudioAssets',
    },
    { skip: !interiorColorId },
  );

  // 360 Section
  const { colorIds, hasColors } = useSelector(selectTransmission360Colors);

  const {
    isFetching: isFetching360StudioAssets,
    isLoading: isLoading360StudioAssets,
    error: error360StudioAssets,
  } = useGet360AssetsByIdQuery(
    { url: getUrl('/qaz'), body: colorIds },
    { skip: !hasColors },
  );

  return {
    isFetching:
      isFetchingTransmission ||
      isFetchingExteriorStudioAssets ||
      isFetchingInteriorStudioAssets ||
      isFetching360StudioAssets,
    isLoading:
      isLoadingTransmission ||
      isLoadingExteriorStudioAssets ||
      isLoadingInteriorStudioAssets ||
      isLoading360StudioAssets,
    error: errorTransmission || errorExteriorStudioAssets || errorInteriorStudioAssets || error360StudioAssets,
    transmissionData,
  };
};

Reducer and Selectors

// bapColorImages.ts

const initialState: BapColorImages = {
  transmissions: {},
  transmissionId: '',
  interiorColorId: '',
  exteriorColorId: '',
};

const bapColorImages = createReducer(initialState, builder => {
  builder
    // ...
    .addMatcher(bapApi.endpoints.getColorByTransmission.matchFulfilled, (state, action: PayloadAction<any>) => {
      const selectedExteriorColor = action?.payload?.transmission?.exteriorColors;
      const { transmissionId } = action.meta.arg.originalArgs;
      const ret = {...};

      state.transmissions[transmissionId] = ret;
    })
    .addMatcher(bapApi.endpoints.getStudioAssetsById.matchFulfilled, (state, action: PayloadAction<any>) => {
      const { transmissionId } = state;
      const { id } = action.meta.arg.originalArgs;

      const studioAssetsRet = {
        ...state.transmissions[transmissionId].studioAssets,
        [id]: action.payload.studioAssets,
      };

      const ret = {
        ...state.transmissions[transmissionId],
        studioAssets: studioAssetsRet,
      };
      state.transmissions[transmissionId] = ret;
    })
    .addMatcher(bapApi.endpoints.get360AssetsById.matchFulfilled, (state, action: PayloadAction<any>) => {
      const { transmissionId } = state;

      const three60AssetsRet = {...};

      const ret = {
        ...state.transmissions[transmissionId],
        three60Assets: three60AssetsRet,
      };
      state.transmissions[transmissionId] = ret;
    });
});

// And some selectors

Well, naturally, the component called the Hook and received data from the reducer through selectors.

The second command did this:

Main hook to chain requests

// useFetchLayoutServiceAssets.ts

const useFetchLayoutServiceAssets = (transmissionId?: string) => {
  // ...
  const {
    data: exteriorImages,
    isFetching: isFetchingExteriorStudioAssets,
    isLoading: isLoadingExteriorStudioAssets,
    error: errorExteriorStudioAssets,
    isSuccess: isSuccessExteriorStudioAssets,
  } = useGetStudioAssetsByIdQuery(
    {
      url: getUrl(`/qwe/${exteriorColorId}/studioAssets`),
      id: exteriorColorId,
    },
    { skip: !transmissionData?.exteriorColorId },
  );

  const {
    data: interiorImages,
    isFetching: isFetchingInteriorStudioAssets,
    isLoading: isLoadingInteriorStudioAssets,
    error: errorInteriorStudioAssets,
    isSuccess: isSuccessInteriorStudioAssets,
  } = useGetStudioAssetsByIdQuery(
    {
      url: getUrl(`/asd/${interiorColorId}/studioAssets`),
      id: interiorColorId,
    },
    { skip: !transmissionData?.interiorColorId },
  );

  const threeSixtyDataRequestBody = {
    exteriorItemIds: [transmissionData?.exteriorThreeSixtyId || ''],
    interiorItemIds: [transmissionData?.interiorThreeSixtyId || ''],
  };

  /**
   * Skip ThreeSixty if there are no ThreeSixty Sitecore IDs, or if the
   * studio assets have Sitecore IDs but the requests aren't done yet.
   */
  const shouldSkipThreeSixty =
    !transmissionData?.exteriorThreeSixtyId ||
    !transmissionData?.interiorThreeSixtyId ||
    (!!transmissionData?.exteriorColorId && !isSuccessExteriorStudioAssets) ||
    (!!transmissionData?.interiorColorId && !isSuccessInteriorStudioAssets);

  const {
    data: threeSixtyImages,
    isFetching: isFetching360StudioAssets,
    isLoading: isLoading360StudioAssets,
    error: error360StudioAssets,
  } = useGet360AssetsByIdQuery(
    { url: getUrl('/zxc'), body: threeSixtyDataRequestBody },
    {
      skip: shouldSkipThreeSixty,
    },
  );

  return {
    data: {
      exteriorImages,
      interiorImages,
      threeSixtyImages,
      nameBadge,
    },
    isFetching: isFetchingExteriorStudioAssets || isFetchingInteriorStudioAssets || isFetching360StudioAssets,
    isLoading: isLoadingExteriorStudioAssets || isLoadingInteriorStudioAssets || isLoading360StudioAssets,
    error: errorExteriorStudioAssets || errorInteriorStudioAssets || error360StudioAssets,
  };
};

Api layout

// layoutServiceApi.ts

const layoutServiceApi = createApi({
  reducerPath: 'layoutServiceApi',
  baseQuery: fetchBaseQuery(),
  endpoints: builder => ({
    // ...
    getColorByTransmission: builder.query<TransmissionAssets | undefined, GetColorByTransmissionQueryArgs>({
      query: ({ url }) => ({ url }),
      transformResponse: transformLayoutServiceTransmissionApiResult,
    }),
    getStudioAssetsById: builder.query<LayoutServiceAsset[] | undefined, GetStudioAssetsByIdQueryArgs>({
      query: ({ url }) => ({ url }),
      transformResponse: transformLayoutServiceApiAssetsResult,
    }),
    get360AssetsById: builder.query<LayoutServiceThreeSixtyAssets | undefined, Get360AssetsByIdQueryArgs>({
      query: ({ url, body }) => ({
        url,
        method: 'POST',
        body,
      }),
      transformResponse: transformLayoutServiceThreeSixtyResult,
    }),
  }),
});

And as you can see, the API contains transformResponse for each request, I will not present them here, I think the logic is clear.

Summary

It turns out that one team created a data warehouse, formats everything there as it should, saves it, and takes data from there.

The second team abandoned the Reducer and each time retrieves the transformed data from API queries.

If you compare, there are pros and cons in both options. I would like to know the community’s opinion on what, in your opinion, is the correct way to store data and why?

Additionally, if there are other options, I will be glad to communicate in the comments.

Thank you

reduxjs / redux-toolkit