Better State Management for React using Providence

A few months back, I wrote a blog post on how to build your own Micro Front End for the Open edX platform. More than half of the post's content was centered around Redux. Redux is complicated. It's frustrating. In fact, most developers I know would rather forget it even exists. However, it's hard to let go of the advantages that Redux gives us. What if we could get all of its advantages, but have a much simpler interface? Enter the Eye of Providence State Management Library, or Providence for short. It gives you better state management for React without the hassle.

Why Use Libraries like Redux in the First Place?

If you've spent any amount of time developing with React, you've probably built something where you need to share state between multiple components at once. There are a few ways to handle this, but the traditional means is to built a Redux store. A Redux store allows you to store all of your state in one place.

Not only that, but it also allows you to replay the entire history of your state using debugging tools. You can rewind and fast-forward to see every way your data has changed since your app initialized! That's pretty neat.

It's exciting to have such power at your fingertips-- but developers are quickly hit with reality. Just getting Redux to work in the most minimal case requires an enormous amount of code, and it's mind-bending to wrap your head around. It's almost as if developers weren't meant to work directly with it.

Using Redux as a Storage Driver

That's because they weren't. The biggest mistake most teams make with Redux is treating it as a state management library. It makes sense-- Redux is sold as the prescribed state management library for React-based projects. However, using Redux for state management is the wrong level of abstraction. Redux's verbosity is needed to provide its guarantees. However, what is verbose can be automated.

Since Redux has to support virtually every state management need you can think of, it has to be very open ended. However, most of what we need to manage on the frontend boils down to:

• Objects
• Arrays of Objects
• Managing the fetching and updating of these objects using an API
• Forms

Providence handles these cases with ease, and lets you focus on development instead of fighting with Redux. Since it's built on top of Redux, you can still use the full power of its features when you need them.

How Providence Provides Better State Management for React

Providence provides better state management for React by autogenerating Redux store modules. It works with Microsoft's Redux Dynamic Modules library to add and remove sections of the state as components need them. Take, for example, this single line of Providence code:

const controller = useSingle('product', {endpoint: 'https://example.com/api/products/x/'})

What does this line get you?

• A Redux Module with mutations
• A controller that makes the state easy to update
• Easy REST patching
• Error handling for fetching and updating the object

An array is similar:

controller = useList('currentItem', {endpoint: 'https://example.com/api/endpoint/'})

With this array (called a 'List' in Providence parlance), you receive:

• A set of Redux modules, one for each object you fetch from the endpoint
• Pagination handling
• Convenience methods for posting to a list to create a new item
• Again, error handling!

A form is a bit more complicated, but not by much:

controller = useForm('survey', {
  endpoint: 'https://example.com/api/survey/',
  fields: {
    age: {value: 20},
    email: {value: '', validators: [{name: 'email'}]},
    name: {value: ''},
  }
})

With this form, you get:

• Convenience "Fielders" that make authoring form components a breeze!
• A straightforward system for front-end form validation
• More error handling-- get errors per-field, and form-wide!

See Providence in Action

It may be difficult to wrap your head around the level of magic Providence provides. The best way to get a hold of it is to check out the demo, and then to read its code.

Providence comes with in-depth documentation, and we're currently using it to build a new project, Listaflow, which is open source, and currently being tested in limited beta for the Open edX Core Contributor sprint check ins.