The Crux of Redux
A tool for managing data and UI states in JS apps
Redux has been the developer community’s talk since its dawn, making it a popular tool for managing applications. Being a fancy React framework, Redux makes some complicated stuff a lot easier for programmers. It follows a pretty exciting and intuitive pattern to implement in enormously growing applications. Redux is a constant buzzword around React, and I hope after reading this article you might become one step closer to understand what Redux is, how it works, and why is it preferred.
Redux is an open-source JavaScript library, specifically for the state management of an application. It was created by Dan Abramov in 2015, inspired by the famous application architecture of Facebook called Flux. With its excellent documentation, small size (only 2 KB), and flexibility to work with many libraries, Redux soon became a favorite choice for handling application states and data flow. Head to https://redux.js.org/, and you would be welcomed with a neat and portable text:
“A predictable state container for JavaScript applications.”
Before jumping to further definitions from the technical glossary, let me illustrate how Redux comes to the rescue of the developer community.
Potterheads (and muggles) imagine we are now at an imaginary carnival hosted by Professor Dumbledore in the Hogwarts School of Magic. The carnival will showcase several games, joy rides, food stalls, and obviously, an exhibit of magic potions and wands. Dumbledore instructed the students to arrange all the booths, games, prizes, and everything magical. Not to forget the less co-operation between the houses, things didn’t go as planned. There were repeated installations of the same stuff at unsuitable spots. The Professor was disappointed to see the unorganized display of the carnival. A change was inevitable, and the Wizard’s Council chose to seek an expert- The Redux Management Store. They analyzed the problem and decided to channelize all the workflow only through the store and implement a good communication and coordination path. The following week, a poster spread across the Hogwarts School.
Long story short, the carnival was a huge success! Similar to the carnival, an application has many components to use and update. In this case, each house was confused with the existing changes made, which gets even more complicated with an increase in components. In small applications, this might not arise as a significant problem. But for large applications with larger application states, managing and making decisions on the growing data is difficult. There might be components that use the same data, store them randomly in the DOM (Document Object Model) tree, and later render the stored data. Redux is handy when multiple components share the data, which changes the current application state. Without worrying about the expanding application asset size, developers can extract the piece of data they require as Redux connects all components to a single store✨
“One app — One store — One state”
Redux has a single repository of information called the store, often called “single source of truth,” which contains the global state for the entire application. This concept is called immutability, which means any change can produce a new version of the state, enabling developers to write a more predictable code and move back and forth among the state’s previous versions. State management facilitates communication and data sharing across all components. Data need not be passed through multiple levels of components, which makes applications more traceable. It helps to sync the current state with actions and other parts of the application. Let’s get to a quick heads-up on the three main aspects of Redux:
ACTIONS: Actions send data to the store from user interaction, API calls, form submissions, etc. It is dispatched to the reducers when there is a state update.
REDUCERS: Pure functions that act on the current state of the application to return a new state. The states are stored as objects and specify how the state responds to the action.
STORE: You might know by now that the store holds the current state, functions, and objects. Redux maintains a single store to store, update and access the state.
Why REDUX?
-> Organization: Redux maintains a strict structure on how the code needs to be organized, making it consistent and more manageable for a team of developers.
-> Maintainable: The Redux application structure can be easily understood, which makes it easier to organize. It works with any UI layer and offers a large ecosystem of components and add-ons.
-> Ease of testing: Redux’s code consists of functions that are pure, small, and isolated. Developers get the freedom to test across any client, server, and native environment.
-> Server rendering: Provides a better user experience and search engine optimization. The initial render of the app can be handled by sending the state to the server. The components can be rendered in HTML before sending them to the clients.
-> Ease in debugging: It is easy to understand errors in coding, networks, and other bugs during the development phase. Time-travel debugging allows you to perform infinite undo-redo between the states and even send absolute error reports to a server.
-> Community: Numerous articles, tutorials, boilerplates, and tools makes Redux more appealing to use. It provides a great developer experience with many additional tools like logging, hot reloading, replay, and so much more.
Over time, Redux Toolkit has evolved with several utility functions, store setup, common use cases, and much more. However, the fundamentals of Redux remain the same, which calls for a proficient knowledge in handling actions, reducers, and the store. It is viable to create an entire application using React, but as it gets more complex, a state management library like Redux allows better data flow without performance concerns. Again, Redux might not be that perfect fit for your puzzle. Or you may not need Redux for simple actions and UI changes at the component level. But Redux still has a lot of features that provide you a hassle-free experience.
To explore more about the diversity, data flow, and rendering the components along with helpful code snippets, check out this article by Hristijan Stevanoski: https://medium.com/javascript-in-plain-english/the-only-introduction-to-redux-and-react-redux-youll-ever-need-8ce5da9e53c6
Happy learning :)
Further Reading: https://almerosteyn.com/2016/08/redux-explained-again
https://blog.logrocket.com/why-use-redux-reasons-with-clear-examples-d21bffd5835/
