Introduction to Redux Pattern

Introduction to Redux Pattern In this overview of the Redux Pattern, we'll dig into the basics and answer these pressing questions: - *What is the Redux?* - *Why do we use the Redux?* - *When do we use the Redux?* Redux patterns in applications created in React or Angular are very handy tools in helping define state and managing active and passive events. What is the Redux Pattern? > Redux is a pattern and library for managing and updating application state, using events called "actions". - Redux Documentation Not only is redux great for defining events, it also guides the flow of events through preditable event tracking. What Redux Pattern is not Redux and Redux patterns are not to be confused with Flux patterns or Flux architecture. The main difference between these two patterns is the "single source of truth" concept. Stores are our single sources of truth containing the state of our application. In Flux, the store can be split and defined in multiple locations throught the application. Redux as a single source of truth means that we can better maintain and improve our applications by merging state and events into a single location. This single location feeding the application is one of the key considerations developing for the architecture and scalability of an application. Why do we use the Redux Pattern? > ...Redux makes it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. - Redux Documentation While Redux's use is simple for managing a "global" or "single source" level of state, there are some other impacting benefits: Predictability of Events. When we know what event will happen next if we click a button or link, we take away all assumptions about events triggering other events. Better Debugging from Event Tracing. Personally, event tracing is one of the huge benefits I like about state management because defects in events can be pinpointed accurately. If state wasn't updated correctly, we can make better logical assumptions. Complex State Change State is the one thing we can rely on and sometimes this state can receive asynchronous updates from different events. Redux makes these udpates easier to manage. When do we use the Redux Pattern? Ideally, Redux should be used for parts of an application that share state. Here are a few other considerations when deciding to use the Redux pattern. Frequency of State Changes State can be small or large, simple or complex, but in every case where events are performed, state will always be updated. Application Scalability First, we need to predict how an application will grow in size from the number of features. As an application scales from a simple set of functions to an enterprise-level experience, duplicated code and events decrease performance. Additionally, a Single Page Application (SPA) benfits greatly from Redux. For example, event-based routing behaves differently from a "regular" website since we conditionally generate new pages. As the SPA increases in features or pages, so does its need for state management. Complexity of State Changes and Logic Sometimes application state complexity increases as the application scales. Technical debt takes on a different form when the state isn't properly managed. *Red, Green, Refactor* is a simple, effective strategy to help minimize state technical debt - debt casue from a lack of code hygiene. In *Red, Green, Refactor* we identify what needs to change, determine how we make the change, then execute the change. In the case for state, we can merge similar portions of state together or split apart state by feature or function, making it easier to access parts of state. Likewise, any logic that relies on combined or nested state should be updated as you make those changes. How to Start Using Redux Today While this is an introduction to using Redux, it's helpful to note where we can start to add it in our projects. File Structure First, we defined a store location. We can choose to have this live on the same directory level as our other components and services: ` React Next, we can utilize state management. For vanilla JavaScript apps, we can use Redux as is, but there is special version of it created for React applications called React-Redux. The main difference here is the React integration: ` Angular Similarly for the popular Angular framework, we have NgRx, a version of Redux created specifically for Angular. ` You can choose your own adventure with state management. Choose wisely! Closing Thoughts Talking about the glories of Redux comes with it's cons as well. Keep in mind that using Redux also means defining a state that can become overly complex and require more overhead for Red-Green Refactoring. The benefits far outway this cost, however. The key things to remember about Redux is that it's meant to define a predictable set of events, manage and share application state in a *single source of truth*, and should be used when a project becomes large and complex....

Jan 11, 2021

Morgan Worrell

4 mins

Redux

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.