Learning Redux, Or 4 Days On A Typo

In the evenings as of late, I have been diving head first into a brand new tech stack (for me):

  • React
  • Redux
  • React Router

This doesn’t cover all the related technologies that enable this stack to function (webpack, babel, and a whole load more).

I figured learning React, in a general sense, would be fairly challenging, but ultimately worthwhile. I definitely still feel this way.

It took me a while to get my head around React, but once I had, things started dropping into place.

So, I added Redux to the mix.

I followed the Todo tutorial over at the Redux docs, which went well.

Then I set myself a little challenge. I read through the Async Redux tutorial but decided: rather than simply type out what I saw, this time, I would try and reproduce the functionality, but without referring to the docs. Unless very stuck.

The finished project should be able to fetch a list of posts from a given subreddit, and display them in a list. Then, a drop down box should allow changing the subreddit, and also invalidating any locally saved Reddit post titles. Fairly basic in truth.

Things started well. It was a Friday night so beer was involved, but the general functionality for fetching posts, dispatching a request and receive action, and handling those actions seemed in place.

But for some reason, everything kinda died when posts were received.

It’s well worth pointing out, at this point, how useful the Redux Logger middleware can be for getting a feel for just what the heck is happening in your application as the state changes.

However, even with Redux Logger, I still couldn’t figure out what was going wrong. The posts were definitely being requested. The response was being received, and the array containing the posts was populated.

But the next state just would not contain the array posts.

I’m somewhat ashamed to say it took essentially 4 days to spot this typo. But it did, and during that time I learned a really useful, if somewhat fundamentally basic bit of debugging advice:

For the love of God, put a console.log() on your switch default statements.

Also, repeat after me: I before E, except after C.

Sad panda.

export const REQUEST_POSTS = 'REQUEST_POSTS'
export const RECEIVE_POSTS = 'RECEIVE_POSTS'

and:

function postsBySubreddit(state = { }, action) {
  switch (action.type) {
    case INVALIDATE_SUBREDDIT:
    case RECEIVE_POSTS:
    case REQUEST_POSTS:
      return Object.assign({}, state, {
        [action.subreddit]: posts(state[action.subreddit], action)
      })
    default:
      console.log('switch on :: postsBySubreddit default', action.type);
      return state
  }
}

Yup. In my reducer I had made a basic typo (fixed above).

Frustratingly, because these were constants, WebStorm wasn’t detecting my fat fingered tomfoolery.

I wanted to share this not because it was insightful in any serious way. Rather, I want to highlight that mistakes are easily made. Learning new things is hard, and whilst something like this will lead you to drink smack your head against the wall, it is ultimately part of the learning process.

I see all too frequently how beginners get easily frustrated, and worst, believe that experienced programmers know exactly what to do for any situation, and never make mistakes. If only 🙂

Anyway, I strongly recommend the Redux tutorials, and pretty much anything else that Dan Abramov puts out there. This guy is super smart, and an amazing teacher. Thank you Dan!

Published by

Code Review

CodeReviewVideos is a video training site helping software developers learn Symfony faster and easier.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.