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.