React+Reduxで音楽検索アプリを作ってみた

  return {
    type: types.RECEIVE_ITEM,
    item
  }

 switch(action.type) {
  case types.REQUEST_ITEM:
  case types.RECEIVE_ITEM:
    return {
      ...state,
      items: action.itemData
    }
  default:
    return state
  }

import rootReducer from '../reducers';
import {createStore} from 'redux';

const store = createStore(rootReducer);

src/
  ├ actions/
  │     └ index.js
  ├ components/
  │     ├ audio/
  │     │   └ AudioController.js
  │     ├ tabs/
  │     │   ├ Album.js
  │     │   ├ Artist.js
  │     │   ├ SearchBar.js
  │     │   ├ Track.js
  │     │   ├ tab-content.js
  │     │   ├ tab-list-item.js
  │     │   └ tab-list.js
  │     └ SearchMusic.js
  ├ constants/
  │     ├ action.js
  │     ├ component.js
  │     └ server-constants.js
  ├ containers/
  │     └ App.js
  ├ images/
  ├ reducers/
  │     └ index.js
  ├ sagas/
  │     └ index.js
  ├ store/
  │     └ index.js
  ├ styles/
  ├ authentication.js
  └ index.js

function authentication() {
  if(/localhost:3000\/$/.test(window.location.href)) {
    // implicit grant flow  (change it to authorization flows later)
    window.location.replace(
      "https://accounts.spotify.com/authorize?client_id="+serverConstants.clientId+"&redirect_uri="+serverConstants.redirectUri+"&response_type=token&state=123"
    )
  }
  let url = window.location.href
  return url.match(/#(?:access_token)=([\S\s]*?)&/)[1]
}

class SearchBar extends Component {
  render() 
    let input = this.props.item
    return (
      <div className='searchBar-wrapper'>
        <p>Search for an Artists, Song or Album</p>
        <form onChange = {e => {
          e.preventDefault()
          this.props.onChange(input.value)
        }}>
          <input
            autoFocus
            defaultValue={this.props.item}
            placeholder="start typing..."
            ref={node => {
              input = node
            }}
          />
        </form>
      </div>
    )
  }
}
SearchBar = connect()(SearchBar)
export default SearchBar

handleSearchBarChange(nextItem) {
    this.props.boundActionsCreators.searchItem(nextItem)
}

  componentDidUpdate(prevProps) {
    if ((this.props.item !== prevProps.item) && (this.props.item !== '')) {
      this.props.fetchData(this.props.item, this.props.token)
    }
  }

export function fetchData(searchedItem, token) {
  return {
    type: types.FETCH_DATA,
    searchedItem,
    token
  }
}

function* apiFlow() {
  while(typeof x === 'undefined') 
    const {searchedItem, token} = yield take(types.FETCH_DATA);
    yield fork(fetchData, searchedItem, token);
  }
}

export default function* rootSaga(cable) {
  yield fork(apiFlow);
}

function forkLater(task, searchedItem, token) {
  return fork(function* () {
    yield delay(1000);
    yield fork(task, searchedItem, token)
  })
}

function* apiFlow() {
  let task;
  while(typeof x === 'undefined') {
    const {searchedItem, token} = yield take(types.FETCH_DATA);
    if (task && task.isRunning()) {
      task.cancel();
    }
    task = yield forkLater(fetchData, searchedItem, token);
  }
}

function* fetchData(searchedItem, token) {
  let setArtists = yield call(fetchArtists, searchedItem, token);
  let setAlbums = yield call(fetchAlbums, searchedItem, token);
  let setTracks = yield call(fetchTracks, searchedItem, token);

  let parsedItems = mergeFetchedData(setArtists, setAlbums, setTracks)
  yield put({type: types.RECEIVE_ITEM, item: searchedItem, itemData: parsedItems})
}

function* fetchArtists(item, token) {
  yield put({type: types.REQUEST_ITEM, item})

  return yield axios.get( `https://api.spotify.com/v1/search?q=${item}&type=artist`, {
    headers: { 'Authorization': 'Bearer ' + token, }
  })
    .then(response => response.data)
    .then(res => res.artists.items.map(item => ({
      id: item.id,
      name: item.name,
      image: item.images[1]
    })))
    .catch(err => {
      console.log(err)
    })
}

  getPanel() {
    if (this.props.spotify.items === undefined || this.props.spotify.items.length === 0) {
      return ;
    } else {
      switch(this.state.showPanel) {
        case constants.ARTIST_PANEL:
          return (
            <Artist artists={this.props.spotify.items.artists} />
          );
        case constants.ALBUM_PANEL:
          return (
            <Album albums={this.props.spotify.items.albums}/>
          );
        case constants.TRACK_PANEL:
          return (
            <Track tracks={this.props.spotify.items.tracks}/>
          );
      }
    }
  }

  render() {
    const panel = this.getPanel()
    return (
      <div>
        ...
        <TabList>
          <TabListItem dist={constants.ARTIST_PANEL} label="Artists" onClick={this.onClick.bind(this)} />
          <TabListItem dist={constants.ALBUM_PANEL} label="Album" onClick={this.onClick.bind(this)} />
          <TabListItem dist={constants.TRACK_PANEL} label="Track" onClick={this.onClick.bind(this)} />
        </TabList>
        <TabContent>
          {panel}
        </TabContent>
      </div>
    )
  }