Redux and Parcel

I spent some of Friday going through my Chinese flashcard app with the goal of refactoring it to use #Parcel.js and #Redux.

#Redux:
It was quite interesting taking something that wasn’t using Redux and slowly moving logic out of the components.

I took a bottom up approach – starting with click handlers on lower level components and slowly shifting logic upwards to a reducer.

It was useful (and a learning experience) to think about the events in my app and watch the components simplify (at the cost of a growing reducer JS file)

https://github.com/jdlrobson/DivideAndConcur/commits/redux

I’m not quite done.

  • While refactoring I decided to add a subscriber that changes the state of my Game component on any event. Long term my goal is not to do this and instead rely entirely on properties and add a single render subscriber.
  • There’s still stuff to simplify. I have an END_ROUND event that is currently fired by Game.jsx when all the current cards have been dealt and answered. I found myself pondering whether the reducer itself should dispatch this event. I never made a decision.

#Parcel.js
This was surprisingly straightfoward. I decided to make my game client side only. I pulled all the logic in the server side components into JS libraries that didn’t rely on the node fs package and then I removed all my express routes/logic in favor of a babel inline JSON plugin which allowed me to import my data into the app’s JS directly. For the one API request I did need – I relied on CORS.

Once this was done, since I was already using babel plugins (not webpack) and parcel.js has the main selling point of zero configuration – it was easy.

Things I did learn on the way: Parcel.js doesn’t work with Node 6. I use Node 8 locally but Node 6 is on most of our labs boxes.

Open questions: I didn’t work out how to change the port and get time to look in production modes but I recommend Parcel.js if you have a client side only app you want to get up and running with quickly!