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

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

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

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

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 টাকে ষ্টোরে অ্যাড করি / করতে হয় ।

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 বানাতে চাচ্ছি . তাহলে ফোল্ডার স্ট্রাকচার হবে এমন ।

src

app --> store.js

features

api --> apiSlice.js

filterAPi --> filterAPi.js

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)

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;

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,
});