Time The Market is a web app built with React, Redux, and Chart.js. It uses historical S&P500 data to test whether you are lucky enough to time the highs and the lows of the market.

Tags

  • React
  • Redux
React Redux
Redux dispatch or React setState
Testing

React Redux

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:

  1. Move to the next month
  2. Add a new data point
  3. Use math to calculate new values
  4. Check if the app is over, run cleanup and display results
  5. 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.

Testing

Jest and 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.

Other Web Development Projects

Time The Market
Pokedex
Role Play Gamebooks
Landyachtz
Asia Standard Americas
Bare Bones Slider
The Pacific by Grosvenor
White Spot Restaurants
Galpop Image Gallery
10net Managed Solutions
Calm Air International
Manning Elliott
Yum Skincare
Lava Lamp