Information was being passed regularly between the React components. Normally, it would require passing the passing the state down to child components and then passing the props up to the parent component to update.
Using Redux actions and reducers, all components get the ability to retrieve and update the state without passing it through multiple components.
Redux dispatch or React setState
On every app "tick", I needed to update multiple parts of the app's state. I could've run it in one huge function called "updateAppData" but vague naming conventions create confusion in the project cycle. Instead, I broke it down into multiple smaller functions:
- Move to the next month
- Add a new data point
- Use math to calculate new values
- Check if the app is over, run cleanup and display results
- If the app is not yet finished, rerun after a timeout
One issue with React's
setState is that it is asynchronous. Updating the state in order required chaining promises or callbacks. Using Redux's
dispatch, which is synchronous, allowed me to run the state updates in order by just listing them out, which resulted in cleaner code.
Enzyme were the chosen tools to test the application. In addition to unit testing React's components and Redux's actions and reducers, I also had to write asynchronous tests and integration tests.
Data was being retrieved by
axios so I used the
axios-mock-adapter package to mock a small piece of sample data. Since the data required was quite large, I wrote my own generator for the sample data.
The integration testing was more difficult. As the app was running on a recursive loop, I had to simulate it playing for the entire duration. I managed to use Jest's Timer Mocks to test the app's time based functionality.