redux-toolkit

useNavigate blocks rest of the content in createAsyncThunk, redux toolkit

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?

Solution

  • 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 are using React Navigation and need access to navigate outside of Redux components, see Navigating without the navigation prop