Introducing Redux into existing React projects.
Where to begin. That is the big question everyone asks when trying to introduce something into a particular part of an App that they already feel works fine (albeit not really that structured). Over the past month I had been working on an in-house App for my current employer Competa IT and I had been getting into a great rhythm building it. However, I (eventually) discovered that my approach to it was not what it should have been initially. I had set my mind to building this App as quick as possible without thinking of whether to structure it properly from the get-go.
The realization
At first, while building the App I had no problems copying a specific function to different containers of the App. However once the App started to grow in size you start to realize more and more complicated to figure out each containers state. This is where Redux would excel in and I knew that I had to implement it, however I knew it would be a major task and I had no idea where to start and whether it was even feasible at this point.
Where to begin
After going through the motions (literally) and struggling hard to change the whole app at once I managed to figure out a few steps that would help. First off, make sure to always read the documentation of anything you use. I found the Three Principles of Redux a great place to understand how to implement Redux properly. This would be applicable to anyone who is in a situation similar to what I have explained.
- There are a lot of examples on the internet, but make sure to start it your way. (So no (minimum) copy pasting!!!). This will not only help to clear a lot of the confusion but make your code much more easier to debug than someone else’s work.
- Look at the project from a position of vantage. What I mean is take into account that there is hierarchy, especially within React. Where and how you place your components matters for the whole project and data flow.
- Work from small to big. Take one component at a time and decide whether it needs to be added to the state and whether actions can be moved to Redux.
- Get all the necessary middleware. Using the Redux chrome dev tools? Add it to your store with this package. Want to make a fetch action? Make sure to have the right middleware for promise-based functions in Redux.
- This is a bit of a bonus but, try to find a mentor. I was lucky enough to have some experienced colleagues that knew how to build and refactor apps with Redux the right way .This had an incredible effect on my understanding and I really would recommend to talk code with someone who understands the concepts.
Of course I cannot really share the project that I was working on however I can leave a personal example that I built. After building this, I really got the hang of setting up Redux and making simple actions. I think it would definitely help to get a better grip of how Redux works.
I hope this helps you get started. If you have any questions or comments, let me know down below!
