Refactoring Redux Side of the Project: Changing Insert Cell Before to Insert Cell After

When working on a complex project, it's not uncommon to encounter areas of the code that could be improved for better maintainability, readability, and performance. Refactoring, the process of modifying existing code without changing its external behavior, can help address these issues. In this article, we'll focus specifically on refactoring the Redux side of a project to change all instances of insert cell before to insert cell after.

Updating Action Types

The first step in this refactor is to update the action type to insert cell after. Open the state-action-types/index.ts file and find the reference to insert cell before and change it to insert cell after. It's crucial to do this manually instead of relying on automatic renaming logic within the editor to ensure consistency across all files in the project.

Updating Action Creators

Next, go to the action-creators/index.ts file and scroll to the bottom, where you'll find insert cell before. Change the name to insert cell after, as well as the associated action type and action return type annotation. This change will cause an error, so move to the top of the file and find insert cell before action. Change it to insert cell after and save.

Similarly, open the actions/index.ts file and look for insert cell before action. Rename it to insert cell after, change the associated action type to after, and update the export for do after as well. These changes help ensure consistency in all action references.

Updating Reducers

The final part of this refactor focuses on updating the reducer itself. Open the cells-reducer and search for insert cell before. Change it to insert cell after and update the logic. Currently, to add a new cell, the code creates a brand new cell, adds it to the data object, and inserts the cell's id into the order array.

The code finds the index of the cell inside the order array with an ID property inside the action payload and adds the new ID right before the found one. When the cell ID property is null, it adds the new ID to the end of the order array.

To change it to insert cell after, we need to instead add in the new ID immediately after the found ID, and if the payload's ID is null, we add the new ID to the start of the order.

Update the if statement to handle the case where found index is less than zero by adding the new ID to the start of the order array with unshift(). Modify splice() to add the new ID after the found ID by changing the provided found index to found index + 1.

Conclusion

Refactoring is an important process in software development that can make the code more maintainable, readable, and efficient. In this article, we focused on refactoring the Redux side of a project to change all instances of insert cell before to insert cell after. By updating action types, action creators, and reducers, we've ensured consistency and made it easier to maintain the code in the future.