My React Redux App State Explained

For those of you following this blog (all two of you), you’ll know that I’ve been investing time in learning React and Redux.  I’ve been working on a “toy” app I’ve codenamed “DanTube”.  I’m hoping that one day this will take down YouTube.  In all seriousness, it actually uses the YouTube API.  Its been a good learning tool for me, but its also far from being completed.  I’ve taken the time to try and diagram out how this application works (as of the time of this writing).

Application State Overview

Below is a diagram of what the state of this application looks like.

There are essentially three properties to state right now:

  • videos,
  • searchBox, and
  • currentSearch.

The videos property is an object which contains three subproperties: videoList, isFetching, and pageToken.  searchBox is also an object but it only contains one property: isShowing.  currentSearch is simply a string.

Videos

By far, the most complex part of this application is the videos.  This is not only because it is the “meat and potatoes” of the app, but it is also dealing with a lot of asynchronous activity.  In the diagram below, it appears that there is a lot going on, so I’ll try and break things down as best I can.

There are three actions that will update the state of videos: fetchVideosupdateFetchVideosreceiveVideos.  fetchVideos and updateFetchVideos do the same thing.  However, I created a second action (updateFetchVideos) for updating videos.videoList andvideos.pageToken when the user scrolls to the bottom of the screen and update thepageToken so the YouTube API can pick up where it left off.  Rather than clear the current videos, the app needs to know to just add more videos to the videos array.  fetchVideos on the other hand clears all the videos in thevideoList parameter and it doesn’t require apageToken.  Other than those differences, these two actions essentially do two things:

  1. Set the video state parameter of isFetching to true
  2. Trigger the ytMiddleware middleware to make a call to YouTube and fetch the videos based on the users searchTerm.

By setting isFetching to true, we can display a message or an indicator to the user while we are still retrieving videos.

Once the middleware pulls all the videos down,  a new action is triggered: receiveVideos.  The ytMiddleware will pass the videoList and pageToken (this indicates where we left off so that we can expand the list from the user’s search) to the videosReducer to then update the videos state.  As part of the update,isFetching is set tofalse so that any messages or indicators can be removed.  There’s more details on this in my previous post.

currentSearch

currentSearch is what the user is searching for.  When the page first loads, the current search is just and empty string.  However, once a user enters text into the searchbox, thesearchbox property is updated.  Its pretty straightforward.  No middleware is required, and there are no async calls.  It only takes one parameter, which is the searchTerm specified by the user.

searchBox

The last piece is the searchBox property.  Again, this is also pretty straightforward.  It only really applies to the UI in mobile.  When the page loads, the physical search box is actually invisible.  The user can click a magnifying glass icon and it will then open up the search box.  At the time of this writing, the searchBox property is an object that only contains one property.  I know that right now this seems silly, but I was considering that if there are other interactions that may need to take place, it might make sense to have an object with keys.  However, going forward, I may refactor it to just be a simple boolean if it seems more appropriate.  When the user clicks the magnifying glass, isShowing is set to true.  After that happens an “X” icon replaces the magnifying glass.  If the user clicks that “X” icon, isShowing is then set to false.

Conclusion

The first stage of this little app is now done.  Its not a finished product at all.  There are several things I’d like to do on this going forward.  Below are some of them:

  • Build a backend so users can log in/log out and add comments to individual videos.  I haven’t decided what I would use but it would probably be either Java or NodeJS.
  • Implement react router so each video has its own page.
  • Implement a Jenkins pipeline so that there can be a CI/CD workflow.
  • Add unit tests.

I’m currently going through a course on Jenkins, so the next step would probably be setting that up before going through with any of the other items.  I hope you enjoyed this.  Please let me know if you have any questions or comments.

You can view the code for this app here:

https://github.com/DMiller5383/DanTube

A working version of the app can be found here:

http://dantube.s3-website-us-east-1.amazonaws.com/