import { combineReducers, configureStore } from "@reduxjs/toolkit";
import { setupListeners } from "@reduxjs/toolkit/query/react";

const reducers = combineReducers({});

const store = configureStore({
  reducer: reducers,
});

setupListeners(store.dispatch);
export default store;

import { Provider as StateProvider } from "react-redux";
import store from "@store/store";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <StateProvider store={store}>
      <App />
    </StateProvider>
  </React.StrictMode>
);

import { createSlice } from '@reduxjs/toolkit'

const initialState = {
  value: 0,
}

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

const reducers = combineReducers({
	counter: counterReducer,
});

export const store = configureStore({
  reducer: reducers
})

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'

export function Counter() {
  const count = useSelector((state) => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const rtkAPI = createApi({
  reducerPath: "rtkAPI",
  baseQuery: fetchBaseQuery({ baseUrl: "/" }),
  endpoints: () => ({}),
});

These endpoints can be added in rtkAPI itself, here code splitting is used for maintainability.

import { rtkAPI } from "./emptySplitApi";

const coursesAPI = rtkAPI.injectEndpoints({
  endpoints: (builder) => ({
    getAllCourses: builder.query({
      query: (name) => `courses/${name}`,
    }),
    getCourseByID: builder.query({
      query: (id) => `courses/${id}`,
    }),
  }),
  overrideExisting: false,
});

export const { getAllCoursesQuery, getCourseByIDQuery } = coursesAPI;