Hey guys! I’m gonna make it quick since I really want to dive right back into my full-stack project (FSP).

As I said yesterday, I passed the final assessment with a perfect score, so that’s a LOAD off my back. It’s an absolute relief to not have assessments weighing on my shoulders anymore.

I’m going to spend the rest of the days for the next week and a half discussing my progress with my FSP. I’ll mostly going over what bugs I’ve found and what I did to go about debugging it. The bug of the day today was the way I had mapped my state to props in my session reducer while creating my front-end authentication form and links. Take a look at my state and session reducer code below:

{
  session: {
    currentUser: {
      id: 1,
      username: 'imbaoss'
    },
    errors: []
  }
}

const _nullUser = Object.freeze({
  currentUser: null,
  errors: []
});

const SessionReducer = (oldState = _nullUser, action) => {
  Object.freeze(oldState);

  switch (action.type) {
    case RECEIVE_CURRENT_USER:
      return merge({}, oldState, action.currentUser);
    case RECEIVE_ERRORS:
      return merge({}, oldState, {errors: action.errors});
    default:
      return oldState;
  }
};

What’s happening here is that my state has an object session with the key currentUser. In my SessionReducer,  where I RECEIVE_CURRENT_USER, I merge a new object, with my oldState,  and my action.currentUser. With the way action was passing in currentUser, I would be merging every prop of action.currentUser as a new key within my session object, as opposed to updating my currentUser key within my state to reflect the updated currentUser. Here’s what the code should look like:

const _nullUser = Object.freeze({
  currentUser: null,
  errors: []
});

const SessionReducer = (oldState = _nullUser, action) => {
  Object.freeze(oldState);

  switch (action.type) {
    case RECEIVE_CURRENT_USER:
      return merge({}, oldState, {currentUser: action.currentUser});
    case RECEIVE_ERRORS:
      return merge({}, oldState, {errors: action.errors});
    default:
      return oldState;
  }
};

You’ll notice in here that I have action.currentUser set as a value to the key currentUser. When this gets merged, the new object has its session updated with the proper currentUser.

I actually had some help with figuring out what was going on with this bug. We first set a couple of our action creators to the window, and tested the result of those action creators. We noticed that the currentUser key wasn’t being updated, but that we would have my user object’s keys within the session key, which meant that I was passing a user as intended, but not into currentUser as needed. That was when we started to move forward in the Redux cycle since we know that the actions worked correctly. Logically, the reducers was next in the cycle, and after some debugging, we found that I wasn’t merging my currentUser correctly.

That’s pretty much it! If you guys have any questions about the bug, I’d be more than happy to explain it some more. Talk to you guys tomorrow!