Pairing Redux with your Angular 2 application may bring more to the table than you’ve considered. With a rich feature set and predictable application behavior, Redux adds to your application the insights and workflow you’ve been looking for.
What is Redux?
This topic is broad and can’t be covered in its entirety here. However, the general idea is to save the state of your entire application in an object tree. The object tree is saved in a container object called the store. State is captured with Redux when an action is taken via an Angular component. The lifecycle pattern shown below offers predictable behavior throughout the entire application, regardless of size.
NG2 Redux state/data flow
Every change to the application state is captured as an action and sent to the store to be recorded. Capturing state changes in your application can provide the ability to review and refine many aspects of your application, from User Experience (UX) to logic efficiencies.
The application state can be used to quickly identify bottlenecks, allowing poor user interaction to be caught early in the development process. This means once your application rolls out for testing, you can spend more time on the shiny new feature set that’s suddenly become a new project requirement. Following are some examples of what Redux can offer.
As a user moves through an application that’s using Redux, we can capture router state change. This will allow us to visualize user navigation. We can identify specific workflows that could be defined in a clearer way.
New tools such as Redux VCR provide the ability to monitor/record a user session using Redux store interactions in real time. From a UX perspective, having the ability to monitor a user and watch him or her walk through complicated application interactions can be invaluable.
Above, you can see application state changes played like a movie with the use of time travel debugging. Also, note that each action taken by the user is being displayed in the console, visible in the bottom right corner.
The image above is of an application state tree displayed using the Redux debugging tool. It was used for an example Angular 2/NG2-Redux application I put together. You quickly get an overview of my example application structure without browsing through the app. My state contains only a couple of modules at this point, clients, router and session. With a couple of clicks, I can drill into different modules and see data structures and associations.
Using the Redux development tools package, you can see actions that have been performed on the application state in sequential order. When an action is dispatched, Redux captures and displays the previous application state, the action taken and the next application state.
Working your way backward or forward through the state assures your action has the correct effect on the User Interface (UI). This makes debugging a breeze, saving the developer from filling out forms thousands of times to assure the correct state transition has been a success.
What integration would look like in your Angular 2 application:
Is Redux necessary?
If you’re building a small application, integrating Redux into your Angular 2 application might not make sense. Reasons to not use Redux are best explained by the Redux author himself, Dan Abramov.
If you’re building a large, data-intensive application, I highly recommend reviewing what Redux can bring to your application.
Here are some great resources you can use:
- NG2-Redux lets you easily connect your Angular 2 components with Redux while still respecting the Angular 2 idiom.
- Redux dev tools for Chrome
This article originally appeared on Dec. 6, 2016.