Hacking the Library | Summer 2018
After finishing InfinityBoard as a Hacking the Library project, I set out that summer to refactor the frontend of the app into a more usable state. Because InfinityBoard is inherently very stateful, managing state proved to be a massive challenge, and in my first pass at the frontend, the state ended up getting very messy. In particular, handling websocket messages proved to be very difficult, as more websocket messages kept being added, with each of them mutating the board state in their own way. What’s more, a single function was handling the state mutation based on these messages. So, in order to put InfinityBoard in a more usable state, I refactored the frontend to using Redux.
store object; every React component subscribes to the portion of the store that it needs, and it uses actions and reducers to manipulate the state in predetermined ways. This helped the state of InfinityBoard’s frontend to be mutated in much smaller, more manageable chunks.
Another major refactoring I did was to change how the frontend was structured into React components. Initially, the frontend consisted of a single
Board component, with any number of
ImageBox components inside of it. However, I realized that there were two distinct groupings of actions and elements with
Board - things that directly change the board state (e.g. box position, box size, etc.), and things that involve other interactions. So, everything not directly related to the board got moved to
BoardWindow: window position, buttons to add boxes, client markers, etc.
Redux and Websockets
Perhaps the biggest improvement I found through implementing Redux was in the websockets’ state propagation. Originally, updating boards through websockets was a nightmare, as a number of different action types were needed for various things.