# Rtk তে কিভাবে এপিয়াই স্লাইস ভেঙ্গে ভেঙ্গে নিয়ে কাজ করা যায়

### Rtk তে কিভাবে এপিয়াই স্লাইস ভেঙ্গে ভেঙ্গে নিয়ে কাজ করতে হয়

আজকে আমরা দেখব RTK তে কিভাবে এপিয়াই স্লাইস ভেঙ্গে ভেঙ্গে নিয়ে কাজ করা যায়।

১/ আমরা কিভাবে একটা RTK API বানাতে পারি ?

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

const apiSlice = createApi({
 reducerPath: "api",
 baseQuery: fetchBaseQuery({
  baseUrl: "http://localhost:9000/",
 }),
 endpoints: (builder) => ({}),
});
export default apiSlice;
```

তারপর আমাদের এই apiSlice টাকে ষ্টোরে অ্যাড করি / করতে হয় ।

```javascript
import { configureStore } from "@reduxjs/toolkit";
import apiSlice from "../features/api/apiSlice";
import filterReducer from "../features/filter/filterSlice";

export const store = configureStore({
 reducer: {
  filter: filterReducer,
  [apiSlice.reducerPath]: apiSlice.reducer,
 },
 middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(apiSlice.middleware),
 devTools: false,
});
```

এখন যদি আমরা apiSlice এই সব API ইমপ্লিমেন্ট করে কাজ করি তাহলে কাজ হবে না এমন না । কাজ হয়ে যাবে কিন্তু আমাদের যদি কোণ যায়গায় সমস্যা বা এরর হয় তাহলে টা খুঁজে ব্যাড় করতে অনেক সমস্যা হতে পারে ।

তাই আমাদের RTK , API স্প্লিট করার মাধ্যম দেখিয়ে দিয়েছেন । সেঁতা কিভাবে করা যেতে পারে সেটাই আমরা দেখব ।

স্টেপ ১ঃ আপনি api ফোল্ডারে আর একটা ফাইল বানাবেন যেটা নাম হবে যার জন্য আপনি API স্প্লিট করছেন

যেমন আমি এখন টাস্কের জন্য একটা API বানাতে চাচ্ছি . তাহলে ফোল্ডার স্ট্রাকচার হবে এমন ।

<mark>src</mark>

<mark>app --&gt; store.js</mark>

<mark>features</mark>

<mark>api --&gt; apiSlice.js</mark>

<mark>filterAPi --&gt; filterAPi.js</mark>

```javascript
import apiSlice from "../api/apiSlice";

const filterApi = apiSlice.injectEndpoints({
 endpoints: (builder) => ({
  getProjects: builder.query({
   query: () => `/projects`,
  }),
 }),
});
export const { useGetProjectsQuery } = filterApi;
```

এভাবে মেইন apiSlice.js ফাইল তাকে import করে injectEndpoints এ ভেতর এই স্লাইসের endpoints গুলো লেখব । এভাবে আমরা এক একটা এপিয়াই এঁর জন্য আলাদা আলাদা করে endpoints লেখতে পারি ।

এতে কোড অনেক কমে আসবে । কোড পড়তে সুবিধা হবে । সমস্যা খুব দ্রুত খুঁজে বের করা যাবে .

### কিভাবে rtk দিয়ে slice বানাতে হয় (createSlice)

```typescript
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
 accessToken: "",
 user: {},
};
const authenticationSlice = createSlice({
 name: "authenticated_data",
 initialState,
 reducers: {
  saveAuthenticatedData: (state, action) => {
   const { accessToken, user } = action.payload;
   state.accessToken = accessToken;
   state.user = user;
  },
 },
});
export default authenticationSlice;
export const { saveAuthenticatedData } = authenticationSlice.actions;
```

```typescript
import { configureStore } from "@reduxjs/toolkit";
import apiSlice from "../features/api/apiSlice";
import authenticationSlice from "../features/authentication/authenTicationSlice";

export const store = configureStore({
 reducer: {
  [apiSlice.reducerPath]: apiSlice.reducer,
  authenticatedData: authenticationSlice.reducer,
 },
 middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware().concat(apiSlice.middleware),
 devTools: true,
});
```