Technologies

Favorite New Technology

To give some background, our project, the EECS Community of Practice Mentor Matching site, background, is a web-based, UI application. To build this UI we are using the JavaScript library, React, as our technology of choice. In particular, we are using React with Typescript, which adds strong typing to React.

React builds its UI based on components. These components create reusable modules that can present UI elements to the user. These components contain an object called state which is used to contain information about the component. This state allows the component to track changes in values, for example, adding an item to a shopping cart when shopping on an online shopping site. Since components are modular, when components need to share information between each other, you have to provide the current state as values between them. With the base React state, in order to share state, you have to explicitly pass each value down the component tree. There is also no way to pass state up the component tree. This can make maintaining one current state between components very complicated.

To help make managing the state easier, you can use a global state that can be referenced within components without having to pass the state between components. The React library already has a built-in state management system that can be used to manage state across components called Context. However, we chose to use Redux as it has many more features and is more suited to our advanced state management needs. Redux is my favorite new technology learned as part of this project.

Why Redux

As mentioned previously, Redux is a state management tool. In our project, Redux has the task of managing particular component-shared states like the current user settings and data pertaining to the current user’s profile. Creating a global state with Redux allows changes to the current user’s settings to reflect in multiple places within the app’s components without the need to explicitly pass the state between them. This effectively reduced the number of “props” (values that are passed down to components as parameters in React) which needed to be passed between our main UI components to almost none. This allowed us to perform major refactoring in the code and reduce some of our component sizes from 150 to 200 lines of code to around 50 lines.