Redux middleware with createApi RTK Query

404 views Asked by At

I was using redux-toolkit for authentication and now I want to do a middleware check before I go to my login page or any page to verify user is user logged in. How can I do it with redux createMiddlewareListener() from redux-toolkit. Heres my code implementing createApi.

export const loginApi = createApi({
  reducerPath: "loginApi",
  tagTypes: ["Login"],
  baseQuery: fetchBaseQuery({ baseUrl: appConfig.apiUrl, jsonContentType: "application/json" }),
  endpoints: (build) => ({
    login: build.mutation({
      query: ({ username, password }) => ({
        url: "/auth/login",
        method: "POST",
        body: { username, password },
      }),
    }),
    getMe: build.query({
      query: () => ({
        url: "/auth/me",
        headers: {
          Authorization: `Bearer ${TokenUtil.getToken()}`,
        },
      }),
    }),
  }),
});

export const { useLoginMutation, useGetMeQuery } = loginApi;

and heres my configureStore

export const store = configureStore({
  reducer: {
    [loginApi.reducerPath]: loginApi.reducer,
    //...other reducers
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware()concat(loginApi.middleware),
});

I've looked some redux middleware implementation and I can only find redux middleware implementation in createSlice().

0

There are 0 answers