Redux Frustration — Let’s talk

So this isn’t a blog on whether your app needs to utilize Redux or not. There is plenty of those out there. This is actually about my recent experience with using Redux to control my Jeopardy app’s state. Redux is great but can be very frustrating when trying to return state properly.

Redux is a great way to control your app’s state at any given time. Redux works with React or any other view library. I’ll be referencing Redux’s online tutorial throughout. Here is the link. Their tutorial is well written and easy to understand.

So here is a quick recap of how Redux works. Redux uses whats called a Store to contain your entire apps state or really just a large JS object. Your app only wants to use one Store per app, not multiple stores. Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. Reducers on the other hand specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes. Ok besides that there is also mapStateToProps, mapDispatchToProps and a bunch more. Check out their tutorial for all the details.

Ok it seems like a lot but it is not that bad once you get to using it.

Likelihood is most of us have worked with Redux before. But if your like me you have trouble sometimes properly returning state inside your Reducer. What makes Reducers tricky is you can’t mutate state directly. So how do you change your app’s state then? We need to create a copy of state and then change our values. Here is a link with a little more of an explanation. So we can create a copy of our state using Object.assign() or by using the object spread operator {…}. Let’s take a look at an example to better understand.

export default function teamScore(state = [
  {'Team 1': 0},
  {'Team 2': 0},
  {'Team 3': 0}
], action) {// future switch case code}

So here is my initial state. I have an array of objects representing 3 teams like 3 people on Jeopardy. Pretty simple and each Team starts out with a score of 0. So now a Team gets a correct answer and needs 200 dollars added. How do we properly return a copy of state with that team’s score changed?

I have two case examples here, one to add to the team’s score and one to subtract from the teams score. Typically with Redux your able to compare an id value to identify the item that you want to change. But in this case I don’t have that to rely on. So I needed to compare the object key string value, which would be the name of the team, against the each current value string. If the two match then I would modify the score for that team by returning an object with that new value. Otherwise I would just return each unchanged. Finally I would return addedToScore, for instance, variable. Like I said before I’m stilling improving on properly returning state object. This took me a little while to get to return correctly.

If your wondering why I returned an object key value wrapped in array brackets, it’s called “computed property names”. This is new with ES6. This fixed my problem because I kept getting an error when I used this.props.playerGuessing as my object key value. Looks a little confusing if your not use to it but it works great. Now I can add or subtract from any teams score all day without a problem.

If anybody has any suggestions about how this could be handled different please leave your comments down below. Otherwise check out my github for the Jeopardy app. Now in the home stretch of completing it.

Well for now I’m outta here till the next blog. Any suggestions for a topic let me now down below. Until next time.