Unable to dispatch another action from inside of asyncThunk (redux-toolkit)

Question

I am pretty new to redux toolkit. I am trying to build an app where I have two slice . 1)uiState (handles the global ui state for the app) 2)notesState ( handles the state for the notes feature in the app)

Below are the two slices

1)notesSlice 2)uiSlice

import axios from 'axios';
import { showAlert } from "./ui";

const initialState = { entities: [], selectedId: null, selectedEntity: null }

export const getNotes = createAsyncThunk(
    'notes/getNotes',
    async (_, { dispatch }) => {
        dispatch(showAlert())
        const res = await axios.get("http://localhost:8080/api/notes?userId=droy");
        console.log('params', _, dispatch);
       
        return res.data
    }
);

const notesSlice = createSlice({
    name: 'notes',
    initialState: initialState,
    reducers: {},
    extraReducers: {
        [getNotes.fulfilled]: (state, action) => {
            state.entities = action.payload.data
        },
        [getNotes.rejected]: (state) => {
            state.entities = []
        }
    }
});


export default notesSlice.reducer


import { createSlice } from "@reduxjs/toolkit"

const initialState = { showAlert: false, alertMessage: "", showGlobalLoader: false }

const showAlertFn = (state , action) => {
    state.showAlert = true
    state.alertMessage =  action.payload.alertMessage
}

const hideAlertFn = (state) => {
    state.showAlert = false
}

const uiSlice = createSlice({
    name: 'ui',
    initialState: initialState,
    reducers: {
        showAlert :showAlertFn ,
        hideAlert :hideAlertFn
    },
})

console.log(uiSlice)

export const  {showAlert} = uiSlice.actions
export default uiSlice.reducer

In the asyncThunk of the notes slice I am trying to dispatch showAlert() action which is part of uiSlice . But whenever I use the dispatch command code execution stops at that line and nothing works. I have searched about the same but this was the syntax mentioned.

Any help will be greatly appreciated.

Thanks in advance

Answer 1

Try dispatch(showAlert({ alertMessage: "Your message" })), since your function expects a payload but you're not passing any.