src/redux/search/search.reducers.ts

+// updating state
+import { SearchState } from '@/redux/search/search.types';
+import { PayloadAction } from '@reduxjs/toolkit';
+
+export const setSearchValueReducer = (state: SearchState, action: PayloadAction<string>): void => {
+  state.searchValue = action.payload;
+};

src/redux/search/search.selectors.ts

+import type { RootState } from '@/redux/store';
+
+// THIS IS EXAMPLE, it's not memoised!!!! Check redux-tookit docs.
+export const selectSearchValue = (state: RootState): string => state.search.searchValue;

src/redux/search/search.slice.ts

+import { createSlice } from '@reduxjs/toolkit';
+import { SearchState } from '@/redux/search/search.types';
+import { setSearchValueReducer } from '@/redux/search/search.reducers';
+
+const initialState: SearchState = {
+  searchValue: '',
+  searchResult: {
+    content: '',
+    drugs: '',
+  },
+};
+
+export const searchSlice = createSlice({
+  name: 'search',
+  initialState,
+  reducers: {
+    setSearchValue: setSearchValueReducer,
+  },
+});
+
+export const { setSearchValue } = searchSlice.actions;
+
+export default searchSlice.reducer;

src/redux/search/search.types.ts

+export interface SearchResult {
+  content: string;
+  drugs: string;
+}
+
+export interface SearchState {
+  searchValue: string;
+  searchResult: SearchResult;
+}

src/redux/store.ts

+import { configureStore } from '@reduxjs/toolkit';
+import searchReducer from '@/redux/search/search.slice';
+import projectSlice from '@/redux/project/project.slice';
+
+export const store = configureStore({
+  reducer: {
+    search: searchReducer,
+    project: projectSlice,
+  },
+  devTools: true,
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;

src/services/api/utils/axiosInstance.ts

+import axios from 'axios';
+import { BASE_API_URL } from '@/constants/api';
+
+export const axiosInstance = axios.create({
+  baseURL: BASE_API_URL,
+});

src/services/api/utils/useApiQuery.ts

+import { BASE_API_URL } from '@/constants/api';
+import { QueryOptions } from '@/types/api';
+
+import useAxios, { UseAxiosResult } from 'axios-hooks';
+import { useMemo } from 'react';
+import { AnyZodObject, ZodError } from 'zod';
+
+type UseApiQuery = <TResponse extends AnyZodObject>(
+  queryOptions: QueryOptions<TResponse>,
+) => UseAxiosResult<TResponse>;
+
+export const useApiQuery: UseApiQuery = <TResponse extends AnyZodObject>({
+  method,
+  path,
+  response,
+}: QueryOptions<TResponse>) => {
+  const [{ data: fetchData, loading, error }, refetch, cancelRequest] = useAxios<TResponse>({
+    method,
+    url: `${BASE_API_URL}${path}`,
+  });
+
+  const dataValidation: { success: boolean; error?: ZodError<TResponse> } = useMemo(() => {
+    if (!fetchData) {
+      return { success: false, error: undefined };
+    }
+
+    return {
+      error: undefined,
+      ...response.safeParse(fetchData),
+    };
+  }, [fetchData, response]);
+
+  const data = useMemo(
+    () => (dataValidation.success ? fetchData : undefined),
+    [dataValidation.success, fetchData],
+  );
+
+  return [{ data, loading, error }, refetch, cancelRequest];
+};

src/types/api.ts

+import { z } from 'zod';
+import { disease } from '@/models/disease';
+import { organism } from '@/models/organism';
+import { projectSchema } from '@/models/project';
+
+export interface QueryOptions<Response> {
+  method: 'GET' | 'POST';
+  path: string;
+  response: Response;
+}
+
+export interface Query<Params, Response> {
+  (params: Params): QueryOptions<Response>;
+}
+
+export type Project = z.infer<typeof projectSchema>;
+export type Organism = z.infer<typeof organism>;
+export type Disease = z.infer<typeof disease>;

src/utils/validateDataUsingZodSchema.ts

+import { ZodSchema } from 'zod';
+
+type IsApiResponseValid = <TData>(data: TData, schema: ZodSchema) => boolean;
+
+export const validateDataUsingZodSchema: IsApiResponseValid = (data, schema: ZodSchema) => {
+  const validationResults = schema.safeParse(data);
+
+  if (validationResults.success === false) {
+    // TODO - probably need to rething way of handling parsing errors, for now let's leave it to console.log
+    // eslint-disable-next-line no-console
+    console.error('Error on parsing data', validationResults.error);
+  }
+
+  return validationResults.success;
+};