After working on apps using React/Redux, sometimes I wonder if the hassle of setting up Redux is worthwhile. As you know setting up Redux requires a bit of effort. First we have to set up the Redux store upfront, followed by the infrastructure needed to manipulate the data in the store (e.g. the reducers). Once all that is done, we can now have one component alter the data within the store and some other component can display that new data from the store. Let’s review a pure React app without Redux and see how things are different.
Here is a simple React app rendering a component called Botspage. This is the highest level component and everything else is arranged hierarchically from this node.
In Botspage, we are further rendering two more components, which are considered child nodes to the main component. We will visit them in a bit.
Since all these sub-components are used to manipulate the data retrieved, the main component, Botspage, is responsible for setting up that data along with the functions needed to manipulate it.
At the start of the Botspage, we see the typical setup of the state (an array that needs to contain some retrieved data) and the lifecycle method that fill it with data “fetched” from some URL. Here, we further prepared the fetched data by attaching a flag to each element in the array.
We now add all the functions to be used by other components to alter the state. This one set the flag to false for a particular array element.
These two delete the data from the database and then remove element from the state.
This one set the flag to true for a particular array element.
When all these element manipulating functions are set up, we can now pass them on for use.
Remember the code above? We are now passing these functions into the sub-components. YourBotArmy will get the releaseBot and deleteBot functions while BotCollection gets enlistBot. These components are also passed the data elements for manipulation, partial or otherwise.
Here in YourBotArmy, we are rendering something called a BotCard for each element from the passed array. And each of the individual component is also passed the two functions received from the BotsPage. This is the tediousness of a pure React app. We are now going from the second level node into the third level and the functions created in the base level are being passed twice. Let’s take a look at the bottom level mode, BotsCard. Here we finally see the function being utilized on some click action.
In this example, we only have three levels of components (BotsPage -> YourBotArmy -> BotsCard) and the functions created in BotsPage needs to travel through YourBotArmy to get to BotsCard to be used. This is the necessary evil of React (pure React), in which many components are getting properties that are not needed for themselves but only to pass downstream to lower level components. Imagine the tree spreads beyond three levels and with more than two base nodes. That will be a lot of properties to keep track of, from top to bottom and back.
That makes Redux so much more attractive even with the upfront infrastructure work. Every component, regardless of how deep down in the tree nodes, access the store and manipulate the data within it via the reducers. I can’t imagine writing a slightly complex app without Redux, can you?