ReactJS - запускать useEffect, только когда сторонняя библиотека полностью загружена в объект окна (Spotify SDK)

Question

Я пытаюсь инициализировать Spotify SDK при монтировании компонента и сохранить экземпляр в моем состоянии Redux. Поэтому в моем представлении DashboardPage я использую useEffect, которое отправляет действие connectPlayer для инициализации проигрывателя.

Проблема в том, что это работает, но не всегда. Работает каждые 1-2 refre sh попытки. Как я могу гарантировать, что это действие будет отправлено только тогда, когда объект window.Spotify доступен? Я попытался использовать операторы if, а также добавить его в массив зависимостей.

useEffect(() => {
    window.onSpotifyWebPlaybackSDKReady = () => {
      console.log("ready");
      dispatch(connectPlayer());
    };
  }, []);

Вот мой создатель действий:

const playerSlice = createSlice({
  name: "player",
  initialState,
  reducers: {
    connectPlayer: state => {
      const playerInst = new window.Spotify.Player({
        name: "Default Player",
        getOAuthToken: cb => cb(localStorage.getItem("access_token")),
        volume: 0.2
      });

      playerInst.addListener("ready", ({ device_id }) => {
        console.log("Ready with Device ID", device_id);
      });

      playerInst.addListener("player_state_changed", state => {
        console.log("player_state_changed", state);
      });

      playerInst.connect();

      state.playerInstance = playerInst;
    }
  }
});

Я загружаю Spotify SDK в public / index. html вот так

<script src="https://sdk.scdn.co/spotify-player.js"></script>