Redux is a predictable state container designed to help you write JavaScript apps that behave consistently across client, server, and native environments and are easy to test. While it’s mostly used as a state management tool with React, you can use it with any other JavaScript framework or library.
Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are independent of each other.
Redux is special because it allows developers to store, manage, and update their data all in one place. This global state management is beneficial for various reasons. It helps prevent a lot of the confusing errors or bugs that can arise from asynchronous management of state/props within React components. Also, it adds readability and clarity to your code.
The above diagram displays the basic data flow of an application built with Redux. All of the information that the app requires is stored in a global state, in this case referred to as “One Store”. This data is passed to a Provider, a built-in React component that distributes the data from store throughout your application.
From here, data flows throughout the app in the same fashion as in React. Smart components are aware of the data architecture in the application, and can pass information to other “dumb” components via props.
User interactions, data input, and other events that trigger state changes in the application are handled by Redux actions. An action is a plain JavaScript object that has a type field. You can think of an action as an event that describes something that happened in the application.
The type field should be a string that gives this action a descriptive name, like "todos/todoAdded". We usually write that type string like "domain/eventName", where the first part is the feature or category that this action belongs to, and the second part is the specific thing that happened.
An action object can have other fields with additional information about what happened. By convention, we put that information in a field called “payload”.
Redux reducers then receive both the current global state object, as well as the action object describing what has occurred. The reducer decides how to update the state if necessary, and returns the new state: (state, action) => newState. You can think of a reducer as an event listener which handles events based on the received action (event) type.
In the basic case above, a reducer called “counterReducer” has been defined, which checks to see if the action “counter/incremented” has occurred, and then updates the global state accordingly.
The reducer returns a new version of “One State”, and the data flow loop is complete. A change in global state triggers a complete re-render of the entire application, and the DOM is updated for the user.
While the nitty gritty details and various methods and features that Redux offers may out of the scope of this one article, understanding the Redux data flow is essential for utilization of this powerful library. I would encourage anyone interested in Redux to parse through the Redux docs, or peruse a plethora of online tutorials and videos available on the internet. Hopefully, understanding Redux will allow you to create a robust and legible data architecture within your frontend, and get the most out of your React web apps!
Sources:
https://react-redux.js.org/introduction/quick-start
https://daveceddia.com/react-redux-immutability-guide/#react-prefers-immutability
Top comments (0)