title: Creating a createAsyncThunk with userID argument
body: <p>I am having front-end issues with Redux. The backend API is working correctly with Postman so I know the problem isn't there and for some reason I can't get the data in my Redux store to populate.</p>
  <p>It is my first createAsyncThunk passing the userId to the backend so I know the problem is something to do with that. I have a console.log in my backend API that prints the log whenever it is accessed so I can see that it isn't being accessed. In the Redux store I am getting a rejected message so I think it is something to do with that.</p>
  <p>Can anyone see anything in my action that looks out of place?</p>
  <p>Form useEffect</p>
  <pre><code>const userDiveLog = useSelector(state =&gt; state.user.userDiveLog);
  
  useEffect(() =&gt; {
          dispatch(fetchUserDiveLog(user.userID));
      }, []);
  </code></pre>
  <p>createAsyncThunk</p>
  <pre><code>export const fetchUserDiveLogs = createAsyncThunk(
      'diveLog/requireUserData', // action name
      // action expects to be called with the name of the field
      async (userId, userDiveLogList) =&gt; {
          // you need to define a function to fetch the data by field name
          const response = await userDiveLogList.fetchById(userId);
          const { data } = response;
          // what we return will be the action payload
          return {
              userDiveLog: data,
              // items: data
          };
      },
  // only fetch when needed: https://redux-toolkit.js.org/api/createAsyncThunk#canceling-before-execution
      {
          condition: (userDiveLog, {getState}) =&gt; {
              const {userDiveLogs} = getState();
              // check if there is already data by looking at the array length
              if ( userDiveLogs[userDiveLog].length &gt; 0 ) {
                  // return false to cancel execution
                  return false;
              }
          }
      }
  )
  </code></pre>
  <p>service</p>
  <pre><code>export const userDiveLogList  = (userId) =&gt; {
          return axios.get(API_URL + `userdiveloglist/${userId}`);
      };
  </code></pre>
  <p>reducer</p>
  <pre><code>export const userSlice = createSlice({
      name: 'user',
      initialState: {
          dives: [],
          diveSpots: [],
          articles: [],
          userDiveLog: []
      },
      reducers: {
          // picks up the pending action from the thunk
          [fetchUserDiveLogs.pending.type]: (state) =&gt; {
              // set didLoadData to prevent unnecessary re-fetching
              state.didLoadData = true;
          },
          // picks up the success action from the thunk
          [fetchUserDiveLogs.fulfilled.type]: (state, action) =&gt; {
              // want to replace all lists, there are multiple ways to do this
              // I am returning a new state which overrides any properties
              return {
                  ...state,
                  ...action.payload
              }
          },
  </code></pre>