Al iniciar sesión, tengo mi componente inicial que llama a una acción de Redux, pero después de iniciar sesión, el token de usuario no se envía lo suficientemente rápido como para que lo reciba el encabezado de axios, si console.log(token) antes y después de axios.create({ headers: auth: token }) muestra nulo, por lo que, por supuesto, obtendré un 'jwt mal formado', pero ¿cómo puedo configurar mi aplicación para esperar a que se cargue el token antes de ejecutar el archivo Redux? Intenté verificar antes de ejecutar mi dispatch para asegurarme de que hay un token , pero el archivo se está ejecutando incluso antes de que se active.
// 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); } } );