React+Redux+Soundcloud = Musio

The first thing which pops into my mind when thinking about react and redux is thenewboston infographics. In this tutorial I will walk you through my personal project Musio.  In the previous article, I have covered the basics of react.

Download

This pretty much speaks about the data flow in react redux.

Musio

Musio is an open source web app that fetches tracks from soundcloud api.

Let me give you brief overview of my project.

Folder structure:

Reducers:

Actions describe the fact that something happened, but don’t specify how the application’s state changes in response. This is the job of reducers.

reducer / reducer_settings.js

reducer / index.js

Actions:

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. You send them to the store using store.dispatch().

actions / actions_settings.js

actions / actions_tracks.js

Store :

A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.

A store is not a class. It’s just an object with a few methods on it. To create it, pass your root reducing function to createStore.

store.js

index.js

Components :

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

components / Grid.js

Now we will see how a component, re-renders on state change. In our case, we have MusicBar which has to re-render when the track changes.( when play_track(id) action is dispatched )

components / MusicBar.js

That’s it ! I guess I covered almost everything.

Upload to Heroku

  1. Create a new project in heroku.
  2. Upload/fork my project in github.
  3. Connect github to heroku.
  4. Select the project repo and deploy.

 

Also refer

  1. The SoundCloud Client in React + Redux

<Happy Coding />