Redux: Add RTK Query + /provisioning/v1/sources endpoint

This commit adds the /provisioning/v1/sources endpoint via a new
apiSlice.js which uses RTK Query's createApi method.

RTK Query allows us to query the /provisioning/v1/sources endpoint using an
automatically generated React hook, `useGetSourcesQuery`. The usage is
something like this (from within a React component):
`const { data: sources, isLoading, isSuccess, isError, error } =
useGetSourcesQuery()`.

This will make it much easier for us to manage data caching and just as
importantly manage loading and error states properly.

Future PRs will migrate data fetching in the other slices (clones, composes,
repositories) to the apiSlice.

For more info on RTK Query, see:
https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics
This commit is contained in:
lucasgarfield 2023-01-24 09:40:16 +01:00 committed by Sanne Raymaekers
parent 1fa0466676
commit d4eb5f78f0
2 changed files with 16 additions and 1 deletions

13
src/store/apiSlice.js Normal file
View file

@ -0,0 +1,13 @@
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const apiSlice = createApi({
reducerPath: 'api',
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
endpoints: (builder) => ({
getSources: builder.query({
query: () => '/provisioning/v1/sources',
}),
}),
});
export const { useGetSourcesQuery } = apiSlice;

View file

@ -2,11 +2,13 @@ import { notificationsReducer } from '@redhat-cloud-services/frontend-components
import { configureStore } from '@reduxjs/toolkit';
import promiseMiddleware from 'redux-promise-middleware';
import { apiSlice } from './apiSlice';
import clonesSlice from './clonesSlice';
import composesSlice from './composesSlice';
import repositoriesSlice from './repositoriesSlice';
export const reducer = {
[apiSlice.reducerPath]: apiSlice.reducer,
clones: clonesSlice,
composes: composesSlice,
notifications: notificationsReducer,
@ -14,6 +16,6 @@ export const reducer = {
};
export const middleware = (getDefaultMiddleware) =>
getDefaultMiddleware().concat(promiseMiddleware);
getDefaultMiddleware().concat(promiseMiddleware).concat(apiSlice.middleware);
export const store = configureStore({ reducer, middleware });