In the world of JavaScript, React is very much dominant when it comes to front-end frameworks. A look at the latest State of JavaScript survey also highlights how a significant number of React developers are using Redux for the state management of their applications.

The two libraries complement each other well; however, for a beginner to the React ecosystem it is not always obvious why an app should use Redux for managing state data, and when it is preferable over React component state. At Red River Software we have found some great use cases for Redux in our apps that would have been difficult or even impossible with just React state. I thought I’d share just some of them.

Data Caching

While users navigate around the various pages of an app, data will frequently be loaded in from an external API or another data source. Some of this data is volatile and needs to be fetched every time. However on many occasions it’s safe to assume that the data is unlikely to change frequently, or that there would be no side effects if it did.

Redux state persists during the typical lifetime of a single-page application (unless of course there’s a hard reload). This makes it a great place to store temporary information, as a kind of data caching layer that reduces the amount of calls needed to an external data source and increases the responsiveness of an app. Redux actions or middleware can be used to check the state of the cache, and to retrieve or re-fetch data as needed.

Undo and Redo

A typical feature required for apps that manipulate a data model is to be able to confirm changes that are made and to be able to revert any alterations. This could be in the simple form of a single undo operation, an entire sequence that allows a user to go back several steps, or the ability to repeat previous actions.

The design of Redux allows such features to be achieved in a couple of different ways. One method is to keep a copy of previous state data (this could also be stored in another part of state). The alternative and perhaps easier means is to store a list of the actions that have previously been applied to state, and then apply similar actions that reverse any changes made.

Iterative Debugging

One of the most useful tools available to a Redux developer is Redux DevTools and its browser extension. You can use this to inspect which actions have been dispatched and the effects they have had, as well as navigating the state structure and seeing how data has been transformed.

One of the lesser known features is the browser extension’s ability to maintain state across page reloads. This allows rapid debugging; state can be inspected, code tweaked and the app reloaded, and then state fully restored instead of lost. This can be a significant productivity improvement for feature development and bug fixing.

There are actually two ways to achieve this in the browser extension, the first being to use the Persist option, which will automatically restore dispatched actions and their state changes after a reload. Alternatively the Import and Export options allow state to be saved as JSON data and reloaded at a later time.

Wizard Interfaces

Sometimes within an app a particular process might require several interactions from the user to complete. A common way to present this is a ‘wizard’ style interface, where the user is guided through a series of steps (usually on separate tabs or pages). This helps to break down a complicated process into smaller chunks that might otherwise be overwhelming to present all at once.

Redux lends itself well to this, allowing user data for each step to be stored in state during the process. This means that a user’s progress is maintained, and they can navigate back and forth between steps of the wizard as required.

Authentication Info

Most React apps will have some form of user authentication, allowing secure access to specific areas and requiring certain permissions to perform some actions. Once a user has been granted access, various React components may need to check which permissions are available to disable or hide functionality.

Storing the available permissions within Redux state is a great way to make them widely accessible across an app. Of course, consideration has to be given to the validity of those permissions: that includes ensuring they are still current by keeping them up-to-date and re-validating them when actions are performed.

To the next level

The above examples can take many React apps to the next level of user experience, and implementing these using Redux brings faster development and ease of maintenance for the developer. The Getting Started with Redux guide by Dan Abramov (the creator of Redux) is a great resource for those who want to really understand the fundamentals of Redux and take it further. If you have found any other great uses for state management libraries, please let us know in the comments below!

list image by Erokism/Flickr, Creative Commons