Skip to Main Content
Resource Hub

Using Redux for Web App Development

By Nikki Dent

We’re always looking for new, innovative technologies that can both increase our productivity and improve our work. This past January, a few members of the Aptera team attended the annual CodeMash conference in Sandusky, Ohio, where they learned about new techniques and technologies. One of the tools they learned about, Redux, we’ve now incorporated into our web application development. It’s been a really helpful tool so far and we’re excited to share it with others. 


redux-banner


What is Redux? 


Redux is a state management tool used in app development. It offers a unified definition of how user action affects the application and serves as a single source of truth for changing data. Redux is popularly used with web applications developed in React but can also be used with any javascript-based framework like Angular, Vue,js, or React Native, as Redux is a self-contained tool. 

To understand Redux, it’s important to understand the concept of “state.” A helpful way to think of a state is to imagine a container that holds all user data right in your web browser. As you interact with an app, the selections you make and other data you input can all be considered the "state" of the application. What Redux does is unify the storage and management of this state, which is always up-to-date even as data is changed and updated by user actions. Before state management tools like Redux, developers had to rework data for separate parts of the app or pass the state to another location using tools that weren’t designed for state management.  


benefits-of-redux


An example of how we’ve used Redux effectively is in a web application where customers can get a quote for service and then act on the quote and complete the purchase. We begin with the quote the user receives for the service, and as they fill in the details for their order, we build up state in Redux, which is stored in the customer’s browser so they can come back and finish the order later on. 


Benefits and Drawbacks 


Using Redux in development not only keeps your code cleaner, which means testing is easier, but it also flexible enough to work within a variety of front-end frameworks. So, you can take the same Redux implementation being used in a web app and change the frontend to make a native mobile app or a server-based app, allowing great flexibility. Redux also interacts well with legacy web development tools like jQuery and AngularJS, making expansion of your existing applications easy.  

With all these helpful benefits, it can be tempting to start with Redux by default, especially if you're using React already, but it doesn’t always make sense to do so. If your app is primarily presentational, for example, you probably don’t need a tool like Redux. Additionally, Redux implementations can be intricate and involve many steps. This can lead to a relatively steep conceptual learning curve for those unfamiliar with functional programming.  


redux-whiteboard


Conclusions 


Redux is the first major in-browser state management tool to be widely adopted and, while it’s still relatively new, we’re excited to start working it into our web application projects where it makes sense. It’s a big time-saver for our developers, speeding up both their development and testing time, plus is provides great flexibility for future app expansions.  

Our team can use Redux on your next web application and teach your in-house development team how to use it, too.  

New Call-to-action

Interested in hearing more?