title: Redux Toolkit Problem, getting a Cannot destructure property as it is undefined
body: <p>Hey Guys im trying to play around with the redux toolkit and i have a wierd issue
  i get :</p>
  
  <pre><code>Cannot destructure property 'currentRequestId' of 'getState(...).toys' as it is undefined
  </code></pre>
  
  <p>vs code tells me that the await before the query is: 
   'await' has no effect on the type of this expression</p>
  
  <p>The currentRequestId really doesnt show in the store, even tho i set it in the code</p>
  
  <p>i copied the example from their site and modified it, perhaps my axios calls kills it?
  i can see my call isnt even being executed for some reason.</p>
  
  <p>i dont know how to implement a UserApi like the showed in their example so im using a regular axios call.</p>
  
  <p>My Code:</p>
  
  <pre><code>import React from 'react'
  import { createAsyncThunk, createSlice, unwrapResult  } from '@reduxjs/toolkit'
  import axios from 'axios'
  import { useDispatch,useSelector } from 'react-redux'
  
   export const query = createAsyncThunk(
    '/api/toys',
    async (criteria, { getState, requestId }) =&gt; {
      const { currentRequestId, loading } = getState().toys
      if (loading !== 'pending' || requestId !== currentRequestId) {
        return
      }
  
      const response = await axios.get('http://localhost:3030/api/toys')
      return response.data
    }
  )
  
  export const ToySlice = createSlice({
    name: 'toys',
    initialState: {
      entities: [],
      loading: 'idle',
      currentRequestId: undefined,
      error: null
    },
    reducers: {},
    extraReducers: {
      [query.pending]: (state, action) =&gt; {
        if (state.loading === 'idle') {
          state.loading = 'pending'
          state.currentRequestId = action.meta.requestId
        }
      },
      [query.fulfilled]: (state, action) =&gt; {
        const { requestId } = action.meta
        if (state.loading === 'pending' &amp;&amp; state.currentRequestId === requestId) {
          state.loading = 'idle'
          state.entities.push(action.payload)
          state.currentRequestId = undefined
        }
      },
      [query.rejected]: (state, action) =&gt; {
        const { requestId } = action.meta
        if (state.loading === 'pending' &amp;&amp; state.currentRequestId === requestId) {
          state.loading = 'idle'
          state.error = action.error
          state.currentRequestId = undefined
        }
      }
    }
  })
  
  export const Test = () =&gt; {
    const { toys, loading, error } = useSelector(state =&gt; state.test)
    const dispatch = useDispatch()
  
  
    const fetchAllToys = async userId =&gt; {
      try {
        const resultAction = await dispatch(query())
        const toys = unwrapResult(resultAction)
        console.log("Test -&gt; user", toys)
        return toys
      } catch (err) {
      console.log("UsersComponent -&gt; err", err)
  
      }
    }
  return(&lt;div&gt;
      Hello
      &lt;button onClick={()=&gt;fetchAllToys()}&gt;Fetch&lt;/button&gt;
  &lt;/div&gt;)
    // render UI here
  }
  
  
  export const selectCount = state =&gt; state.counter.value;
  
  export default ToySlice.reducer;
  </code></pre>
  
  <p>The Store:</p>
  
  <pre><code>import { configureStore } from '@reduxjs/toolkit';
  import counterReducer from '../features/counter/counterSlice';
  import Test from '../features/Test/test'
  export default configureStore({
    reducer: {
      counter: counterReducer,
      test:Test
    },
  });
  </code></pre>
  
  <p>Link To Example:
  <a href="https://jsfiddle.net/3xq7Lng2/" rel="nofollow noreferrer">https://jsfiddle.net/3xq7Lng2/</a></p>
  
  <p>The Docs:</p>
  
  <p><a href="https://redux-starter-kit.js.org/api/createAsyncThunk" rel="nofollow noreferrer">https://redux-starter-kit.js.org/api/createAsyncThunk</a></p>