Productive Redux

Redux is a powerful programming paradigm, but one of the most common criticisms is that it requires too much boilerplate code. For a long time, I agreed with that criticism: why would someone want to do so much work to get basic functionality?

I struggled with this question until I realized that I was thinking about it the wrong way. Saying Redux introduces boilerplate code is sort of like saying C introduces boilerplate -- it's that way by design.

That's when I finally understood Redux. Before long, I built a simple framework that used Redux and automated away the majority of the boilerplate code that I was reluctant to write.

Motivating Use Case

Let's use the canonical javascript example: we're building a todo list. To do this, you need to do the following:

On the backend:

• Create a new resource.
• Set up the backend API. I love Rails, which is why it's still my default go to for building new projects.
• Make sure this backend API supported all the basic use cases: object ownership, permissions, and CRUD (create, read, update, delete) functionality.

With this backend API set up, I'd then go back to my frontend codebase and

• Create a new reducer.
• Create matching actions and link them up to the reducer.
• Test the API to make sure it worked.

After repeating this process ~10 times, I realized that I didn't really need so much fine-grained control. I didn't need to call it id in one place and _id someplace else. And if I could just settle on a single way for defining attributes, I'd save myself a lot of time and my users a lot of bugs.

So I built a small library called Resource Creator that automated as much of this process as possible.

With Resource Creator

Use the createResource helper to bootstrap boilerplate everything:

By doing this, you'll get the following:

• Redux Actions - Typed Redux actions - currently supporting create, read, update, destroy (and also merge and a few other things I needed universally)
• Redux Reducer - A reducer that serves as essentially a database for you
• Reselect Selectors - So that you can efficiently query your reducer.
• Constants - automatically defined so you don't have to hard-code them anywhere.

On the backend, define your resource:

Then, create a controller that inherits from GenericObjectsController.

And you're done. Something that previously took an hour now takes 5 minutes.