What is Redux?
React Redux is considered as the official React binding for Redux which allows React components to read data from a Redux Store, and dispatch Actions to the Store to update data. Redux helps apps to scale by providing a sensible way to manage the state through a unidirectional data flow model. React Redux is conceptually simple. It subscribes to the Redux store, checks to see if the data which the component wants has changed, and re-renders the component.
Redux was inspired by Flux. It has studied the Flux architecture and removed unnecessary complexity.
- Redux does not have a Dispatcher concept.
- Redux has only one Store whereas Flux has many Stores.
- The Action objects will be received and handled directly by Store.
When to use Redux?
Redux allows the users to manage the state of the application in a single place and keep changes in the app more predictable and traceable. It makes it easier to reason about changes occurring in the application. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming. It depends upon the architecture decisions.
We need Redux in situations where the application grows to the scale where managing the app state becomes a hassle, and the users start looking out to make it easy and simple.
The way Redux works is simple. There is a central store that holds the entire state of the application. Each component can access the stored state without having to send down props from one component to another. The components of Redux architecture are explained below.
STORE: A Store is referred to as a place where the entire state of the application lists. It manages the status of the application and has a dispatch function. It is like a brain responsible for all moving parts in Redux.
ACTION: Action is sent or dispatched from the view which are payloads that can be read by Reducers. It is a pure object created to store the information of the user's event. It includes information such as type of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to change.
REDUCER: Reducer reads the payloads from the actions and then updates the store via the state accordingly. It is a pure function to return a new state from the initial state.
Advantages of Using Redux
1. Redux makes the state predictable
In Redux, the state is always predictable. If the same state and action are passed to a reducer, the same result is always produced because reducers are pure functions. The state is also immutable and is never changed. This makes it possible to implement arduous tasks like infinite undo and redo. It is also possible to move back and forth among the previous states and view the results in real-time.
2. Redux is maintainable
Redux is strict about how code should be organized, which makes it easier for someone with knowledge of Redux to understand the structure of any Redux application. This generally makes it easier to maintain. This also helps the users to segregate the business logic from the component tree. For large-scale apps, it is critical to keep the application more predictable and maintainable.
3. Debugging is easy in Redux
Redux makes it easy to debug an application. By logging actions and states, it is easy to understand coding errors, network errors, and other forms of bugs that might come up during production.
Besides logging, it has great DevTools that allow time-travel actions, persist actions on page refresh, etc. For medium- and large-scale apps, debugging takes more time than actually developing features. Redux DevTools makes it easy to taker advantage of all Redux has to offer.
4. Performance Benefits
We might assume that keeping the application's state global would result in some performance degradation. To a large extent, that’s not the case as React Redux implements many performance optimizations internally so that our own connected component only re-renders when it actually needs to.
5. Ease of testing
It is easy to test Redux apps since functions are used to change the state of pure functions.
6. State persistence
We can persist some of the application's state to local storage and restore it after a refresh. This can be really nifty.
7. Server-side rendering
Redux can also be used for server-side rendering. With it, we can handle the initial render of the app by sending the state of an app to the server along with its response to the server request. The required components are then rendered in HTML and sent to the clients.
When not to choose Redux
Applications that consist of mostly simple User Interface changes most often do not require a complicated pattern like Redux. Sometimes, old-fashioned state sharing between different components works as well and improves the maintainability of your code.
Also, the users can avoid using Redux if their data comes from a single data source per view. In other words, if we do not require data from multiple sources, there is no need to introduce Redux. We won’t run into data inconsistency problems when accessing a single data source per view.
Therefore, make sure to check if we need Redux before introducing its complexity. Although it’s a reasonably efficient pattern that promotes pure functions, it might be an overhead for simple applications that involve only a couple of UI changes. On top of that, we should not forget that Redux is an in-memory state store. In other words, if our application crashes, we lose our entire application state. This means that we have to use a caching solution to create a backup of our application state, which again creates extra overhead.
- We have discussed the major features of Redux and why Redux is beneficial to our application.
- While Redux has its benefits, that does not mean we should go about adding Redux to all of our apps. Our application might still work well without Redux.
- One major benefit of Redux is to add direction to decouple “what happened” from “how things change.”
- We should only implement Redux if we determine our project needs a state management tool.