RTK QueryAdvanced

createListenerMiddleware — Side Effects

অর্ডার সফল হলে toast, cart-এর rehydrate ইত্যাদি — বাংলায়।

6টি অংশবাংলা ভাষায়

src/app/listener.tsts

import {
  createListenerMiddleware,
  addListener,
} from "@reduxjs/toolkit";

import { ordersApi } from "@/features/orders/ordersService";
import { toast } from "sonner";

export const listenerMiddleware = createListenerMiddleware();
export type AppStartListening = TypedStartListening<RootState, AppDispatch>;
export const startAppListening =
  listenerMiddleware.startListening as AppStartListening;

// অর্ডার সফল হলে toast
startAppListening({
  matcher: ordersApi.endpoints.createOrder.matchFulfilled,
  effect: async (action, listenerApi) => {
    toast.success("অর্ডারটির জন্য ধন্যবাদ!");
    listenerApi.dispatch(clearCart());
  },
});

// অর্ডার ব্যর্থ হলে message
startAppListening({
  matcher: ordersApi.endpoints.createOrder.matchRejected,
  effect: async (action, listenerApi) => {
    toast.error("অর্ডার করা যায়নি — আবার চেষ্টা করুন");
  },
});

store-এ লাগান

listener → middlewarets

middleware: (getDefaultMiddleware) =>
  getDefaultMiddleware()
    .prepend(listenerMiddleware.middleware)
    .concat(ordersApi.middleware),

কেন createListenerMiddleware

onSuccess-ভিত্তিক side effect component-বহির্ভূত হয়েছে
mutation-এর বিজ্ঞপ্তি ঘরে-ঘরে (another component-ও reaction)
polling/idle-এর side-effects সহজ

effect-এ async

listener effect: async — onClick close থেকেও যথাযথভাবে user reaction দেখাতে। TOAST-এর মতো side-effect এই middleware-এ clean।

শেষ প্যারায় নিজে practice করুন — কোড কপি করে নিজের এডিটরে চালিয়ে দেখুন।