useNavigate blocks rest of the content in createAsyncThunk, redux toolkit - redux-toolkit

Question

I am trying to access useNavigate hooke inside createAsyncThunk in redux toolkit as shown below:
export const onHandleBookmark = createAsyncThunk('articles/example', async (id: string, { dispatch, getState }) => {
const navigate = useNavigate()
console.log('DDD')
console.log('LLL')
//rest of the processing
})
Unfortunately no logs are getting displayed as it exhausts on first line of execution. Can someone tell me what's going wrong?

Answer 1

Option A (simpler, needs redux-toolkit):
When using createAsyncThunk api, the returned function is promisified by default. You can wait for the promise resolution using unwrap() method (inpired by Rust, I guess…). When the promise is resolved, it can be further chained with then() calls, so you can navigate from there:
import { useSelector, useDispatch } from "react-redux"
import { useNavigate } from "react-router"
import { logout } from "../store/auth"
const LogoutButton = () => {
const dispatch = useDispatch()
const navigate = useNavigate()
return (
<button
onClick={() =>
dispatch(logout())
.unwrap() // <-- async Thunk returns a promise, that can be 'unwrapped')
.then(() => navigate("/"))
}
>
Log out
</button>
)
}
Option B (more complected, but works in vanilla react-redux):
While you cannot call useNavigate() outside the React component, you can pass it as an argument to a dispatch() call:
Example component:
import { useSelector, useDispatch } from "react-redux"
import { useNavigate } from "react-router"
import { logout } from "../store/auth"
const LogoutButton = () => {
const dispatch = useDispatch()
const navigate = useNavigate() // <-- Grab the 'navigate' reference
return (
<button
onClick={() => dispatch(logout(navigate))} // <-- Pass 'navigate' as argument
>
Log out
</button>
)
}
Redux Async Thunk
Then you can call the function reference passed as argument in the thunk:
export const logout = createAsyncThunk(
"[auth] logout",
async (navigate) => {
const response = await axios.get("auth/logout")
if (response) {
navigate("/")
return response
}
})

Answer 2

Calling a hook like useNavigate outside of a component is not allowed - and in this case, it will probably throw an error. Not that this is not really about Redux or createAsyncThunk - it would happen everywhere outside of a component.
If you need accedd to navigate outside of Redux components, see Navigating without the navigation prop