Loading album via actions + middleware

src/js/components/Album.js

@@ -4,27 +4,23 @@ import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 
 import TrackList from './TrackList'
-import * as albumActions from '../actions/albumActions'
+import * as spotifyActions from '../services/spotify/actions'
 
 class Album extends React.Component{
 
 	constructor(props) {
 		super(props);
-
-		this.state = {
-			album: false
-		}
 	}
 
 	// on render
 	componentDidMount(){
-		this.loadAlbum( this.props.params.uri );
+		this.props.spotifyActions.loadAlbum( this.props.params.uri );
 	}
 
 	// when props changed
 	componentWillReceiveProps( nextProps ){
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.loadAlbum( nextProps.params.uri );
+			this.props.spotifyActions.loadAlbum( nextProps.params.uri );
 		}
 	}
 
@@ -44,11 +40,11 @@ class Album extends React.Component{
 	}
 
 	renderAlbum(){
-		if( this.state.album ){
+		if( this.props.spotify.album ){
 			return (
 				<div>
-					<h3>{ this.state.album.name }</h3>
-					<TrackList tracks={this.state.album.tracks.items} />
+					<h3>{ this.props.spotify.album.name }</h3>
+					<TrackList tracks={this.props.spotify.album.tracks.items} />
 				</div>
 			);
 		}
@@ -78,7 +74,7 @@ const mapStateToProps = (state, ownProps) => {
 
 const mapDispatchToProps = (dispatch) => {
 	return {
-		albumActions: bindActionCreators(albumActions, dispatch)
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}
 }
 

src/js/services/spotify/middleware.js

@@ -7,6 +7,22 @@ const SpotifyMiddleware = (function(){
 
         switch(action.type) {
 
+            case 'SPOTIFY_LOAD_ALBUM':
+
+                // clear the current album
+                store.dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: false })
+
+                var id = action.uri.replace('spotify:album:','');
+                $.ajax({
+                    method: 'GET',
+                    cache: true,
+                    url: 'https://api.spotify.com/v1/albums/'+id,
+                    success: function(album){
+                        store.dispatch({ type: 'SPOTIFY_ALBUM_LOADED', data: album })
+                    }
+                });
+                break;
+
             case 'SPOTIFY_CONNECT':
 
                 console.log('Spotify wants to connect')

src/js/services/spotify/reducer.js

@@ -14,6 +14,9 @@ export default function reducer(spotify = {}, action){
         case 'SPOTIFY_DISCONNECTED':
             return Object.assign({}, spotify, { connected: false, connecting: false });
 
+        case 'SPOTIFY_ALBUM_LOADED':
+            return Object.assign({}, spotify, { album: action.data });
+
         default:
             return spotify
     }