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

Question

Я создаю приложение Spotify с его API.Я хочу 4 просмотра (например, '/', 'nowPlaying', 'favouriteArtists', 'favouriteSongs').

Мне нужно setAccessToken для использования таких функций, как getMyCurrentPlaybackState() на каждой новой странице, верно?ИДК, если мне нужно if(params.access_token){spotifyWebApi.setAccessToken(params.access_token)} в каждом контейнере, который будет использовать функции, такие как getMyCurrentPlaybackState().Я думал о создании контейнера Spotify.jsx, который обрабатывает хранилище объекта Spotify (который используется в токене и в каждом контейнере, который использует функции spotify).Но с этим Spotify.jsx я не знаю, является ли это хорошим подходом и как connect необходимо spotifyWebApi const для каждого файла контейнера и файла токена.

Для лучшего понимания моей идеи: Я бы создал Token.jsx с getHashParams() и Playing.jsx с getNowPlaying().Каждый нуждается в spotifyWebApi const.

import React, { Component } from 'react';

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

const spotifyWebApi = new Spotify();

class App extends Component {
  constructor(){
    super();
    const params = this.getHashParams(); 
    this.state = { 
      loggedIn: params.access_token ? true : false,
      nowPlaying: {
        name: 'Not Checked',
        image: ''
      }
    }
    if (params.access_token){ 
      spotifyWebApi.setAccessToken(params.access_token) 
    }

  }
  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;
  }
  getNowPlaying(){
    spotifyWebApi.getMyCurrentPlaybackState()
      .then((response) => { 
        this.setState({
          nowPlaying: {
            name: response.item.name,
            image: response.item.album.images[0].url
          }
        })
      })
  }
}

Answer 1

В вашем заголовке упоминается 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
        })
      })
  }
}

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

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

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

Answer 2

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

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 }))
    }
  }
}
}

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