Redux Toolkit (RTK) + TypeScript boilerplate for React/Next.js. Includes pre-configured RTK Query API slices, user token management, and central store setup.
npm install rtk-setup-forwebsite``text`
npm i rtk-setup-forwebsite
rtk-setup-forwebsite is a reusable Redux Toolkit + TypeScript setup that can be easily integrated into React/Next.js projects.
Included slices:
- baseApi (RTK Query + token handling)blogApi
-
-
-
-
-
---
`text
rtk-setup-forwebsite/
│
├── package.json
├── README.md
├── tsconfig.json
├── node_modules/
│
├── src/
│ ├── api/
│ │ ├── baseApi.ts
│ │ ├── blogSlice.ts
│ │ ├── aboutSlice.ts
│ │ ├── statisticsSlice.ts
│ │ └── notificationSlice.ts
│ │
│ ├── store/
│ │ └── index.ts
│ │
│ └── slices/
│ └── userTokenSlice.ts
│
└── index.ts
All core logic is inside the src folder. index.ts is the central export file.
2️⃣ Installation
npm install rtk-setup-forwebsite
3️⃣ Using the Store
Wrap your app with Redux Provider:
import { Provider } from "react-redux";
import { store } from "rtk-setup-forwebsite";
import App from "./App";
export default function Root() {
return (
);
}
4️⃣ Using API Slices
Example: Blog API
import { useGetallBlogsQuery, useCreateBlogMutation } from "rtk-setup-forwebsite";
function BlogComponent() {
const { data: blogs, isLoading } = useGetallBlogsQuery();
const [createBlog, { isLoading: creating }] = useCreateBlogMutation();
return (
{blog.content}
Other slices (about, statistics, notification) work in the same way.
5️⃣ Using User Token Slice
import { useDispatch, useSelector } from "react-redux";
import { addUserAccessToken, removeUserAccessToken } from "rtk-setup-forwebsite";
import type { RootState } from "rtk-setup-forwebsite";
const dispatch = useDispatch();
const token = useSelector((state: RootState) => state.userToken.token);
dispatch(addUserAccessToken("myToken123"));
dispatch(removeUserAccessToken());
6️⃣| Slice | Description |
| ----------------- | ----------------------------------- |
| baseApi | RTK Query setup with token handling |blogApi
| | Blog CRUD endpoints |aboutApi
| | About CRUD endpoints |statisticsApi
| | Statistics & analytics endpoints |notificationApi
| | Notifications endpoints |userTokenSlice
| | User access token state management |
7️⃣ Export Structure
All exports are centralized in index.ts:
export { store } from "./src/store";
export * from "./src/api/blogSlice";
export * from "./src/api/aboutSlice";
export * from "./src/api/statisticsSlice";
export * from "./src/api/notificationSlice";
export * from "./src/slices/userTokenSlice";
export { api } from "./src/api/baseApi";
8️⃣ Tips for Users
All API slices are fully typed (TypeScript)
Hooks are auto-generated, e.g., useGetallBlogsQuery
Central store & token management included
Can be easily integrated into any React/Next.js project
যেকোনো React/Next.js project এ সহজে integrate করা যাবে
``