How to use the @reduxjs/toolkit.createAsyncThunk function in @reduxjs/toolkit

import {
  createAsyncThunk,
  createSlice,
  SerializedError,
  createEntityAdapter,
} from "@reduxjs/toolkit";
import { APIKey } from "pipe/pkg/app/web/model/apikey_pb";
import * as APIKeysAPI from "../api/api-keys";

const MODULE_NAME = "apiKeys";

const apiKeysAdapter = createEntityAdapter();

export const generateAPIKey = createAsyncThunk<
  string,
  { name: string; role: APIKey.Role }
>(`${MODULE_NAME}/generate`, async ({ name, role }) => {
  const res = await APIKeysAPI.generateAPIKey({ name, role });
  return res.key;
});

export const fetchAPIKeys = createAsyncThunk<
  APIKey.AsObject[],
  { enabled: boolean }
>(`${MODULE_NAME}/getList`, async (options) => {
  const res = await APIKeysAPI.getAPIKeys({ options });
  return res.keysList;
});

export const disableAPIKey = createAsyncThunk(

cloudProvider: props.cloudProvider,
    kind: props.kind,
    description: "",
  });

  return applicationId;
});

export const disableApplication = createAsyncThunk<
  void,
  { applicationId: string }
>(`${MODULE_NAME}/disable`, async (props) => {
  await applicationsAPI.disableApplication(props);
});

export const enableApplication = createAsyncThunk<
  void,
  { applicationId: string }
>(`${MODULE_NAME}/enable`, async (props) => {
  await applicationsAPI.enableApplication(props);
});

export const updateDescription = createAsyncThunk<
  void,
  { applicationId: string; description: string }
>(`${MODULE_NAME}/updateDescription`, async (props) => {
  await applicationsAPI.updateDescription(props);
});

const initialState = applicationsAdapter.getInitialState<{
  adding: boolean;
  loading: boolean;

export const toggleAvailability = createAsyncThunk<
  void,
  void,
  { state: AppState }
>("project/toggleAvailability", async (_, thunkAPI) => {
  const s = thunkAPI.getState();

  if (s.project.staticAdminDisabled) {
    await projectAPI.enableStaticAdmin();
  } else {
    await projectAPI.disableStaticAdmin();
  }
});

export const updateGitHubSSO = createAsyncThunk<
  void,
  Partial & { clientId: string; clientSecret: string }
>("project/updateGitHubSSO", async (params) => {
  await projectAPI.updateGitHubSSO(params);
});

export const updateRBAC = createAsyncThunk<
  void,
  Partial,
  { state: AppState }
>("project/updateRBAC", async (params, thunkAPI) => {
  const project = thunkAPI.getState().project;
  await projectAPI.updateRBAC(Object.assign({}, project.teams, params));
});

export const projectSlice = createSlice({

import { findMetadataByKey } from "../utils/find-metadata-by-key";
import { addToast } from "./toasts";

const METADATA_KEY = {
  TRIGGERED_DEPLOYMENT_ID: "TriggeredDeploymentID",
};

export const COMMAND_TYPE_TEXT: Record = {
  [Command.Type.APPROVE_STAGE]: "Approve Stage",
  [Command.Type.CANCEL_DEPLOYMENT]: "Cancel Deployment",
  [Command.Type.SYNC_APPLICATION]: "Sync Application",
  [Command.Type.UPDATE_APPLICATION_CONFIG]: "Update Application Config",
};

const commandsAdapter = createEntityAdapter();
export const fetchCommand = createAsyncThunk(
  "commands/fetch",
  async (commandId: string, thunkAPI) => {
    const { command } = await getCommand({ commandId });
    if (command === undefined) {
      throw Error("command not found");
    }

    if (command.status !== CommandStatus.COMMAND_SUCCEEDED) {
      return command;
    }

    switch (command.type) {
      case Command.Type.SYNC_APPLICATION: {
        const deploymentId = findMetadataByKey(
          command.metadataMap,
          METADATA_KEY.TRIGGERED_DEPLOYMENT_ID

id ? selectById(state.pipeds, id) : undefined;
export const selectPipedIds = (state: AppState): EntityId[] =>
  selectIds(state.pipeds);
export const selectAllPipeds = (state: AppState): Piped.AsObject[] =>
  selectAll(state.pipeds);

export const fetchPipeds = createAsyncThunk(
  `${MODULE_NAME}/fetchList`,
  async (withStatus: boolean) => {
    const { pipedsList } = await pipedsApi.getPipeds({ withStatus });

    return pipedsList;
  }
);

export const addPiped = createAsyncThunk<
  RegisteredPiped,
  { name: string; desc: string; envIds: string[] }
>(`${MODULE_NAME}/add`, async (props) => {
  const res = await pipedsApi.registerPiped({
    desc: props.desc,
    envIdsList: props.envIds,
    name: props.name,
  });
  return { ...res, isNewKey: false };
});

export const disablePiped = createAsyncThunk(
  `${MODULE_NAME}/disable`,
  async ({ pipedId }) => {
    await pipedsApi.disablePiped({ pipedId });
  }

export const disablePiped = createAsyncThunk(
  `${MODULE_NAME}/disable`,
  async ({ pipedId }) => {
    await pipedsApi.disablePiped({ pipedId });
  }
);

export const enablePiped = createAsyncThunk(
  `${MODULE_NAME}/enable`,
  async ({ pipedId }) => {
    await pipedsApi.enablePiped({ pipedId });
  }
);

export const addNewPipedKey = createAsyncThunk(
  `${MODULE_NAME}/addNewKey`,
  async ({ pipedId }) => {
    const { key } = await pipedsApi.recreatePipedKey({ id: pipedId });
    return key;
  }
);

export const deleteOldKey = createAsyncThunk(
  `${MODULE_NAME}/deleteOldKey`,
  async ({ pipedId }) => {
    await pipedsApi.deleteOldPipedKey({ pipedId });
  }
);

export const editPiped = createAsyncThunk<
  void,

import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { Role } from "pipe/pkg/app/web/model/role_pb";
import { getMe } from "../api/me";
import { useAppSelector } from "../hooks/redux";

interface Me {
  subject: string;
  avatarUrl: string;
  projectId: string;
  projectRole: Role.ProjectRole;
  isLogin: true;
}

export type MeState = Me | { isLogin: false } | null;

export const fetchMe = createAsyncThunk("me/fetch", async () => {
  const res = await getMe();
  return { ...res, isLogin: true };
});

export const meSlice = createSlice({
  name: "me",
  initialState: null as MeState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchMe.fulfilled, (_, action) => {
        return action.payload;
      })
      .addCase(fetchMe.rejected, () => {
        return { isLogin: false };
      });

export const fetchEnvironments = createAsyncThunk(
  "environments/fetchList",
  async () => {
    const { environmentsList } = await envsApi.getEnvironments();
    return environmentsList;
  }
);

export const addEnvironment = createAsyncThunk<
  void,
  { name: string; desc: string }
>(`${MODULE_NAME}/add`, async (props) => {
  await envsApi.addEnvironment(props);
});

export const deleteEnvironment = createAsyncThunk<
  void,
  { environmentId: string }
>(`${MODULE_NAME}/delete`, async (props) => {
  await envsApi.deleteEnvironment(props);
});

export const environmentsSlice = createSlice({
  name: MODULE_NAME,
  initialState: environmentsAdapter.getInitialState(),
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchEnvironments.fulfilled, (state, action) => {
        environmentsAdapter.addMany(
          state,
          action.payload.filter((env) => env.deleted === false)

const { application } = await applicationsAPI.getApplication({
    applicationId,
  });
  return application as Application.AsObject;
});

export const syncApplication = createAsyncThunk<
  void,
  { applicationId: string; syncStrategy: SyncStrategy }
>(`${MODULE_NAME}/sync`, async (values, thunkAPI) => {
  const { commandId } = await applicationsAPI.syncApplication(values);

  await thunkAPI.dispatch(fetchCommand(commandId));
});

export const addApplication = createAsyncThunk<
  string,
  {
    name: string;
    env: string;
    pipedId: string;
    repo: ApplicationGitRepository.AsObject;
    repoPath: string;
    configPath?: string;
    configFilename?: string;
    kind: ApplicationKind;
    cloudProvider: string;
  }
>(`${MODULE_NAME}/add`, async (props) => {
  const { applicationId } = await applicationsAPI.addApplication({
    name: props.name,
    envId: props.env,

import * as applicationAPI from "../api/applications";
import { ApplicationKind } from "./applications";

const MODULE_NAME = "updateApplication";

export interface UpdateApplicationState {
  updating: boolean;
  targetId: string | null;
}

const initialState: UpdateApplicationState = {
  updating: false,
  targetId: null,
};

export const updateApplication = createAsyncThunk<
  void,
  {
    applicationId: string;
    name: string;
    env: string;
    pipedId: string;
    repo: ApplicationGitRepository.AsObject;
    repoPath: string;
    configPath?: string;
    configFilename?: string;
    kind: ApplicationKind;
    cloudProvider: string;
  }
>(`${MODULE_NAME}/update`, async (values) => {
  await applicationAPI.updateApplication({
    applicationId: values.applicationId,