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:
parent
1fa0466676
commit
d4eb5f78f0
2 changed files with 16 additions and 1 deletions
13
src/store/apiSlice.js
Normal file
13
src/store/apiSlice.js
Normal 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;
|
||||
|
|
@ -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 });
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue