<Provider store={store}> <App> </Provider>

export default configureStore({ reducer: { eg. navBar: navBarReducer } })

import { createSlice } from '@reduxjs/toolkit' const initialState = { activeCategories: [], } export const navBarSlice = createSlice({ name: 'navBar', initialState, reducers: { addFilter: (state, action) => { state.value = [...state.value, action.payload] }, removeFilter: (state, action) => { state.value = [...state.value.filter(items => (item) != action.payload) }, clearFilters: (state, action) => { state.value = [] }, }, }) export const { addFilter, removeFilter, clearFilters } = navBarSlice.actions export default navBarSlice.reducer

import navBarReducer from "../slices/navBarSlice"; export default configureStore({ reducer: { navBar: navBarReducer, }, });

import { useSelector, useDispatch } from 'react-redux' import {addFilter, removeFilter, clearFilters} from '../slices/navBarSlice' const state = useSelector(state => state.navBar) <button onClick={() => dispatch(addFilter("Size Large"))}> 

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react' export const fetchApi = createApi({ reducerPath: 'fetchingData', baseQuery: fetchBaseQuery({ baseUrl: '' }), endpoints: (builder) => ({ getFetch: builder.query({ query: (input) => `${input}`, }), }), }) export const { useGetFetchQuery } = fetchApi

import { fetchApi } from './slices/peopleSlice'; const App = () => { const [skip, setSkip] = useState(true) const { data, error, isLoading } = fetchApi.useGetFetchQuery('https://jsonplaceholder.typicode.com/todos', { skip }) <button onClick={() => setSkip(false)}> Start Fetch! </button> }

import { fetchApi } from './slices/peopleSlice' export default configureStore({ reducer: { people: peopleSlice, [fetchApi.reducerPath]: fetchApi.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(fetchApi.middleware), })