React is the view as they call it in a MVC (Model-View-Controller) world. Actually it is enough to build the whole frontend with React and its components. One does not need anything else to make a React application. Then comes a time, when one thinks of organising the code. Well, then and only then the things we talk now will make sense.
I asked and you may too, “so what are these fancy terms are for?”
TL;TR What is what ?
- Redux is Model or Data or State (Whatever you call it)
- Thunk is helping Redux for communicating with Servers and getting data
- Router is making the application to display specific things on navigating to specific URL
Now for those who need details about each.
React and its universe
The best thing is, about pick and choose. Instead of a monolithic application framework, if the things are so nicely done that one can pick and choose between them to use in an application, it would be really nice. Most importantly at anypoint one should be able to swap between different implementations of the same thing. And React universe is full of these kind of implementations.
React is just to make visual components. There is nothing else to it. The exciting thing is there exists a whole universe arround React which does a lot of things to help build the application. There are different frameworks which use React and guidelines from facebook known as Flux. The community is building a lot of things arround React too.
Once components are done and you are ready to work with data, instead of putting the data logic all arround the place, it feels right to put them at one place. Redux which follows the Flux guidlines makes it possible to do data management easier. If you know a little about Flux then the difference is Flux deals with a lot of stores in the application, while Redux deals with a single store. Do not be afraid to the term store, as simply speaking a store is the model or data. So we can say Flux deals with a lot of models while Redux deals with a single model. In Redux you design your application in such a way that anywhere in the application, the data is coming from one single model / store.
Now we know that we have view and model on frontend. We need a way to communicate with backend to get data and give back data. There comes in Thunk. It helps our Redux applications to sync with server. Talking about Thunk, its actually a middleware to Redux. Which means, Redux has a concept of middleware. Simply put we can plugin different functionality to Redux with our own code.
Well, we got data from server and created our application with components. Now a full application can be built using just these. However, we need a way to show different user interfaces when going to different URLs. As we can develop whole application without a Model layer, we can do the same here too. But the thing is Router makes our life easier in these scenarios. If we want to navigate to different URLs depending upon our usecase and show different UI, then Router makes it very easy for us.
Combining all these together, we get a framework consisting of traditional model,view and controller or whatever you call it.
The nice thing about Redux and Router is they play nicely with each other so that you play nicely with React.
Happy Reacting.