diff --git a/src/Redux/contactsSlice.js b/src/Redux/contactsSlice.js new file mode 100644 index 0000000..7d4cfd0 --- /dev/null +++ b/src/Redux/contactsSlice.js @@ -0,0 +1,38 @@ +import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; + +export const contactsApi = createApi({ + reducerPath: 'Contacts', + baseQuery: fetchBaseQuery({ + baseUrl: 'https://64a00809ed3c41bdd7a6ed28.mockapi.io', + }), + tagTypes: ['Contact'], + endpoints: builder => ({ + getContacts: builder.query({ + query: () => `/Contacts`, + providesTags: ['Contact'], + }), + + addContact: builder.mutation({ + query: ({ name, number }) => ({ + url: '/Contacts', + method: 'POST', + body: { name, number }, + }), + invalidatesTags: ['Contact'], + }), + + deleteContact: builder.mutation({ + query: id => ({ + url: `/Contacts/${id}`, + method: 'DELETE', + }), + invalidatesTags: ['Contact'], + }), + }), +}); + +export const { + useGetContactsQuery, + useAddContactMutation, + useDeleteContactMutation, +} = contactsApi; \ No newline at end of file diff --git a/src/Redux/filterSlice.js b/src/Redux/filterSlice.js new file mode 100644 index 0000000..85ed02d --- /dev/null +++ b/src/Redux/filterSlice.js @@ -0,0 +1,16 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const filterInitialState = ''; + +export const filterSlice = createSlice({ + name: 'filter', + initialState: filterInitialState, + reducers: { + updateFilterValue(_, { payload }) { + return payload; + }, + }, +}); + +export const { updateFilterValue } = filterSlice.actions; +export const filterReducer = filterSlice.reducer; \ No newline at end of file diff --git a/src/Redux/selectors.js b/src/Redux/selectors.js new file mode 100644 index 0000000..35722c1 --- /dev/null +++ b/src/Redux/selectors.js @@ -0,0 +1 @@ +export const getFilter = state => state.filter; \ No newline at end of file diff --git a/src/Redux/store.js b/src/Redux/store.js new file mode 100644 index 0000000..7eb961b --- /dev/null +++ b/src/Redux/store.js @@ -0,0 +1,18 @@ +import { configureStore } from '@reduxjs/toolkit'; +import { setupListeners } from '@reduxjs/toolkit/query'; + +import { filterReducer } from './filterSlice'; +import { contactsApi } from './contactsSlice'; + +export const store = configureStore({ + reducer: { + [contactsApi.reducerPath]: contactsApi.reducer, + filter: filterReducer, + }, + middleware: getDefaultMiddleware => [ + ...getDefaultMiddleware(), + contactsApi.middleware, + ], +}); + +setupListeners(store.dispatch); \ No newline at end of file diff --git a/src/Styles/GlobalStyles.jsx b/src/Styles/GlobalStyles.jsx new file mode 100644 index 0000000..e69de29