Upon login I have my initial component that calls a Redux action but after logging in the user token isn't sent fast enough to be received by the axios header, if I console.log(token) before and after the axios.create({ headers: auth: token }) it shows null, so of course I'm going to get 'jwt malformed' but how can I set up my app to wait for the token to load before running the Redux file? I've tried a check before running my dispatch to make sure there is a token but the file is running even before that is hit.

// Shoes component
useEffect(() => {
    const { sortby } = props;
    dispatch(getShoesAsync(sortby)).then((response) => {
      setLoading(false);
    });
  }, [dispatch, props]);

//Redux token auth
const userTokenAxios = axios.create({
  baseURL: '/api/shoes',
  headers: {
    Authorization: `Bearer ${localStorage.getItem('token')}`,
  },
});

// Redux action
export const getShoesAsync = createAsyncThunk(
  'shoes/getShoesAsync',
  async (payload, { rejectWithValue }) => {
    try {
      const response = await userTokenAxios.get(`?sortby=${payload}`);
      return response.data;
    } catch (error) {
      return rejectWithValue(error.response.data);
    }
  }
);