Как передать константу нескольким компонентам / Разделение файлов React-Redux-Router

Вместо того, чтобы передавать эту константу другим компонентам, я бы создал SpotifyUtils.jsx и внутри него объявил бы константу. И в этом вспомогательном файле я бы экспортировал функции, чтобы другие компоненты могли их использовать. Например:

import Spotify from 'spotify-web-api-js';

const spotifyWebApi = new Spotify();
let token = null

export function isLoggedIn() {
  return !!token
}

export function setAccessToke(_token) {
  token = _token;
  spotifyWebApi.setAccessToken(_token);
}

export function getNowPlaying(){
  return spotifyWebApi.getMyCurrentPlaybackState()
    .then((response) => { 
      return {
        name: response.item.name,
        image: response.item.album.images[0].url
      }
    })
}

Чтобы в компонентах можно было использовать их так:

import React, { Component } from 'react';
import {
  isLoggedIn,
  setAccessToken,
  getNowPlaying,
} from 'helpers/SpotifyUtils'

class App extends Component {
  constructor(){
    super(); 
    this.state = { 
      loggedIn: isLoggedIn(),
      nowPlaying: {
        name: 'Not Checked',
        image: ''
      }
  }

getHashParams() {
  var hashParams = {};
  var e, r = /([^&;=]+)=?([^&;]*)/g,
    q = window.location.hash.substring(1);
  while ( e = r.exec(q)) {
     hashParams[e[1]] = decodeURIComponent(e[2]);
  }
  return hashParams;
}

componentDidMount() {
  if (!this.state.loggedIn) {
    const params = this.getHashParams();
    if (params.access_token) {
      setAccessToken(params.access_token)
      getNowPlaying()
      .then(nowPlaying => this.setState({ nowPlaying }))
    }
  }
}
}

Это позволит повторно использовать вашу константу spotifyWebApi в любом компоненте, который вы импортируете вспомогательные функции. Мне особенно нравится этот шаблон, когда я создаю utils или helpers обычным образом, чтобы вы могли легко повторно использовать код. Кроме того, если Spotify Web Api выпустит критическое изменение, ваш рефакторинг будет проще, потому что вам нужно будет реорганизовать только файл SpotifyUtils.jsx, поскольку он будет единственным файлом, использующим import Spotify from 'spotify-web-api-js'.

В вашем заголовке упоминается Redux, но я не вижу, чтобы ваш код его использовал. С Redux вы можете получить access_token, а затем сохранить его в состоянии. Это позволит вам использовать его в любом компоненте, подключенном к Redux.

Кроме того, с Redux вы можете использовать промежуточное ПО Redux Thunk (или подобное), которое позволит вам использовать действия Redux для вызова API. Таким образом, вы могли бы просто написать различные вызовы API как действия Redux, которые позволили бы вам вызывать их из любого компонента и добавлять результаты в ваше хранилище Redux (которое, опять же, может использоваться в любом компоненте, подключенном к Redux).

Так, например, ваша функция getNowPlaying() может быть действием, выглядящим примерно так:

function getNowPlaying() {
  return function (dispatch, getState) {
    // get the token and init the api
    const access_token = getState().spotify.access_token
    spotifyWebApi.setAccessToken(access_token) 

    return spotifyWebApi.getMyCurrentPlaybackState().then((response) => { 
        dispatch({
          type: 'SET_NOW_PLAYING',
          name: response.item.name,
          image: response.item.album.images[0].url
        })
      })
  }
}

Примечание. Вам необходимо настроить Редукс-редуктор для «spotify» (или, как вы хотите, структурировать свой магазин) для хранения необходимых данных.

Итак, вы можете вызвать getNowPlaying () из любого компонента. Он сохраняет результаты в хранилище redux, которое вы также можете использовать из любого подключенного компонента. И вы можете использовать ту же технику получения access_token из магазина, когда это необходимо в действиях.

В качестве альтернативы, если вы не хотите использовать Redux, вы можете предоставить значения контекста всем дочерним компонентам, используя функции Контекст React. Вы можете сделать это с помощью того токена, который понадобится каждому компоненту в вашей настройке. Но, на мой взгляд, Redux - лучший вариант для вас.