Why calling thunk is specific from app.tsx? - redux

Question

When I call me thunk from app.tsx, it returns this error:
> Build error occurred
TypeError: Cannot read property 'useContext' of null
at exports.useContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react/cjs/react.production.min.js:24:118)
at useReduxContext (/Users/kukodajanos/Workspace/Tikex/Portal/Team/node_modules/react-redux/lib/hooks/useReduxContext.js:27:46)
Why app.tsx is specific to all other component?
import { useAppDispatch } from '../hooks'
import { me } from '../tikexModule/slices/tikexAPI'
const MyApp: Page = ({ Component, pageProps }: AppPropsWithLayout) => {
const dispatch = useAppDispatch()
useEffect(() => {
dispatch(me())
}, [])
return <></>
}
export default MyApp
And the thunk itself:
export const me = createAsyncThunk(`${namespace}/me`, async () => {
const { data } = await axios({
method: 'get',
url: 'me',
headers: { crossDomain: true },
})
return data
})
and the action:
const tikexAPI = createSlice({
name: 'tikexAPI',
initialState,
reducers: {
},
extraReducers: (builder) => {
builder
.addCase(me.fulfilled, (state, { payload }) => {
state.authnRes = payload
})
and hooks.ts
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'
import { createSelector } from '#reduxjs/toolkit'
import {
authnResS,
userDTOS,
organizationsS,
selectedOrganizationIdS,
selectedOrganizationS,
selectedEventIdS,
selectedEventS,
} from './tikexModule/slices/tikexAPI'
import {
AuthnRes,
OrganizationDTO,
OrganizationList,
SoldTicketRes,
UserDTO,
ProgramDTO,
} from './tikexModule/Types'
// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>()

Answer 1

I believe the error is in dispatch, where you dispatch a function call of the thunk, instead of passing the thunk function itself.
const thunkFunction = (dispatch, getState) => {
// logic here that can dispatch actions or read state
}
store.dispatch(thunkFunction)
Note that thunkFunction has no parenthesis () to invoke the thunk.
In your case me() should be without parenthesis:
useEffect(() => {
dispatch(me)
}, [])
I don't work with thunks normally but I believe the reason that works is that a thunk has a toString() function that exposes the action type `${namespace}/me`.