https://github.com/theprojectsx/blog-manager-rtk-test
RTK Query testing project (Simple Blog Manager)
https://github.com/theprojectsx/blog-manager-rtk-test
Last synced: about 1 year ago
JSON representation
RTK Query testing project (Simple Blog Manager)
- Host: GitHub
- URL: https://github.com/theprojectsx/blog-manager-rtk-test
- Owner: TheProjectsX
- Created: 2025-04-09T16:05:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-04-09T16:09:30.000Z (about 1 year ago)
- Last Synced: 2025-04-09T17:26:18.501Z (about 1 year ago)
- Language: JavaScript
- Size: 35.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## ⚙️ RTK Query Setup
**Project structure (inside `src/`):**
```
src/
├── app/
│ └── store.js
└── features/
└── someFeature/
└── someFeatureApi.js
```
---
## 🧱 Install Required Packages
```bash
npm install @reduxjs/toolkit react-redux
```
---
## 🧠 store.js (inside `app/`)
```js
import { configureStore } from "@reduxjs/toolkit";
import { someFeatureApi } from "../features/someFeature/someFeatureApi";
export const store = configureStore({
reducer: {
someFeatureApi: someFeatureApi.reducer, // Manually named reducerPath
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(someFeatureApi.middleware),
});
```
---
## 🌍 API Slice (inside `features/feature/`)
```js
// someFeatureApi.js
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const someFeatureApi = createApi({
reducerPath: "someFeatureApi",
baseQuery: fetchBaseQuery({ baseUrl: "https://example.com/api/" }),
endpoints: (builder) => ({
getItems: builder.query({
query: () => "items",
}),
addItem: builder.mutation({
query: (data) => ({
url: "items",
method: "POST",
body: data,
}),
}),
}),
});
export const { useGetItemsQuery, useAddItemMutation } = someFeatureApi;
```
---
## 🧩 Wrap App with Provider
```js
import { Provider } from "react-redux";
import { store } from "./app/store";
;
```
For **Next.js**, use `_app.js`.
---
## 📦 Usage Example
```js
const { data, error, isLoading } = useGetItemsQuery();
const [addItem] = useAddItemMutation();
const handleSubmit = async () => {
await addItem({ title: "Sample" });
};
```