How to approach making changes to an existing React-Redux application
There are a lot of great articles about getting started with React-Redux apps. Most of them take the todo app example and walk us through the steps of coding the app and at the end we have a working todo app. However, in the real life situation when a new developer is on-boarded to an existing project, the getting started guides are not of much help because these projects are sometimes too big and are not exactly as simple as the todo app.
For example, consider an existing enterprise project having multiple components including backend and APIs, frontend app(s) (web and mobile), build and deployment automation, etc. etc. In such projects, when we are tasked with adding functionality or fixing bugs, at first we are so overwhelmed with the enormous source code and the various integration points that we end up doing something different than what was expected and as a result we break existing functionality. Then, the next time and after that, we learn from our mistakes and we get used to the project and it goes on.
In frameworks like React with Redux, where the initial learning curve is steep, it becomes even more difficult to even try changing an existing, production application, without breaking anything.
Well, in this post, I am sharing my learning around how I got used to some existing React-Redux apps and how I ended up finding a pattern. Honestly, there is no rocket science to it. The framework has well-defined code components and no matter how big or small a project is, the code is almost always organised using these code components. So, there are always actions, reducers, components, containers and the store driving a React-Redux app. It’s just a specific order of doing things that I would like to share in this post so that when you make changes to an existing app, you feel confident and comfortable without worrying about the blame view. ;)
Example Scenario
Let’s consider a scenario where we have a shopping app which has a bunch of APIs for product catalogue, categories, payments, reviews, user management, etc. And, this app is in production.
Problem Statement: Let’s assume we’ve been given a task of adding the user rating information for each product, if available. For simplicity, let’s also assume that there is an API which takes the product’s identifier and returns the product’s rating. So, all we need to do is get the rating information from the API and show it on the UI along with other product information.
Alright, let’s do this.
Note: I’m assuming that the reader knows the basic concepts of React-Redux apps, javascript programming and debugging.
Step 1 — Find the app’s data source integration point
Firstly, we need to find out the integration point through which our app integrates with the data APIs (mentioned above). Generally, this would be an API wrapper layer, wrapping the API endpoints, transforming or mapping data into the app’s data model and finally returning it to the actions. Try tracing this integration point using the call stack or by adding debug/log statements. I like the log statements approach.
Step 2 — Update the API wrapper
After we’ve found the app’s data integration point which is the API wrapper, we need to update this with new wrapper methods for the rating API. We might also need to create data models for the data returned by this API. One simple way to do this is to combine the rating data with the product data model itself. Once this is done, let’s write a quick integration test to check if our new wrapper method is retuning the data, through the API, as expected.
Step 3 — Update Reducers
Now that we have updated the data integration layer and that we know how the rating data looks, we need to update or add reducers so that this data can be stored in the redux store. So, in this step, we would update the reducers.
Step 4 — Update Actions
After updating the API wrapper and the reducers, next up is updating the action itself. The action would be calling the API wrapper to get the data and then the reducer (dispatch) to update the redux store with the retrieved data.
Note: Keep in mind, if we have just updated the product data model with additional rating information then we need to make appropriate changes in the actions and reducers where we are updating the product (section of the) store.
Step 5 — Update Components and Containers
Now, that we have the data being retrieved from the API and stored in the app’s store, it’s time to show this data on the UI. If everything has been done carefully, nothing should break even after making the changes described in the previous steps. At this time we just have a new property added to the product object but this property is not being used anywhere. Let’s use it.
Component: The rating component can be a simple react component which takes the rating number in its props and renders those many stars in a horizontal layout. Ideally, the UI/UX designer would have given a layout and we would follow that while developing this component. This new component would be the child component of the product component which renders information about the product.
Container: As with all React-Redux apps, this app would also have containers associated with components. In this case, when the rating component is child component of the product component, we need to update the connect method of the container associated with the product component to pass the rating information for the product, if needed. It’s also possible that no changes might be needed in the container if the whole product list being passed to the component in its props. In that case, the rating information would already be passed along with the rest of the data in the product objects. We just need to pass the object property of product object containing the rating data to the props of child ratings component.
Step 6 — Update routes
In this example scenario, because we have only created a child component which renders inside another component, we don’t need to update the app router. However, in scenarios where we are adding new views to the app which includes adding new component and containers, then we might need to update the app’s router logic (or routes) so that the new components can be included in the navigation.
That’s it. Those are the primary steps that you need to follow to get acquainted with your new React-Redux project and to make small changes without breaking anything.
While the above-mentioned steps provide a general idea about how to approach extending or updating an existing React-Redux app, they are not a definitive guide. There may be projects with customization (hacks) and complex components which might need a different approach.