According to the official documentation, Redux is a predictable state container for JS apps.
Let's break down the definition they provided. We get 2 main keywords here. They are 'predictable' and 'state container'.
We will start with the term 'predictable'. It means that we 'll have a complete idea of every single action and state of our application.
The other term 'State Container' refers to a container or store that will be provided by redux for storing our entire application state.
Now let's come to the point how redux maintains the 'predictable' and 'state container' terms. Actually redux provides some events called 'actions' that can be used to update and manage our application state. But we have to follow certain patterns and rules of redux which will help us to predict our application state.
Okay we have an initial idea of what redux is, but what problem does it solve?
Let's imagine you are building a large scale React application. So there may be many components holding different states. If we want to pass this state from component to component we have to pass them as props again and again. And there is also the problem of 'lifting state up' arises. Redux solves this problem and gives us a centralized store to keep our state. We can easily access and modify our state by following some rules and patterns of redux.
We have got a basic overview of what redux is and why it is useful. Let's look at how it works all together in an application.
Firstly we have to create a store with the help of the root reducer function that will be provided by redux. There will be an initial state configured with the store. Our UI will be rendered based on the initial state. Now if we want to change something in our UI based on user interaction we have to modify the store. For performing this action redux provides a function called dispatch. Change in store forces all the parts to re-render that are using the previous state. Let's visualize this.
Redux also provides some cool libraries and tools like react-redux, redux-toolkit, redux dev tools. They have made our life easier.
For exploring more you can check out their official documentation.
Top comments (0)