Redux + React
What is Redux and Why Use?
Imagine that you are using hundreds or even thousands of components in a project. After a while, managing our stats without using Redux can really become almost impossible. At this point, we can say that using Redux saves lives.😃 Redux offers us the opportunity to use our States globally, so when we want to use a state in our top layer to in a lower component in our project, we get rid of this phenomenon called props drilling thanks to redux 🚀
When we examine Redux, there is a Store concept as seen in the image above. So what is this Store?
So if we sum up briefly, Redux provides us to Global State Management, It offers us state management from one place, thus preventing us from drowning in props.🚣
Redux Data Flow
In this section, I will try to explain Redux Data Flow on figure shown below.
The View part seen in the picture above is the first screen a user encounters when users open the web page. Let’s say we have an input field on this screen and our user typed own name and pressed the save button. The moment he/she pressed it, an action happened. This action corresponds to the Actions part. In this Actions section, we need to dispatch the name written by the user to the Store section. After the sent information arrives at the Store, it is met by our Reducers at the relevant location. Reducers take the state provided by store and make the change or action that needs to be done. After that, submits this updated state forth to the Store. We have only one State object on the Store, after the state is updated, it goes back to the View section, View section also gets updated.
According to me, the most important things to be known:
- There is only one Store
- There are Reducers under the Store
- The only job Reducers do is data exchange. Reducers are pure functions that is, they are functions that have no effect. Pure Function called as function that return a single value😅
By now, we should be aware that we have React which is a UI library and we have Redux which is a state managament library. They work both independently each other to directly use Redux in our React application it is a bit confusing and also diffucult that is the reason we have the React-Redux Package. React-Redux is the official Redux UI binding library for React. What we mean by that is React-Redux offers a couple of functions that will help us to connect our React application with Redux so if we are using React and Redux together , we should also use React- Redux to bind the two libraries.
Let me quickly summarize the points we have learned so far
- React is a library used to build user interfaces
- React-Redux is a library that provides binding to use React and Redux together in an application
Thanks for reading, see you next time 👋