A simple framework to be more productive with Redux and Typescript.

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.

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

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 matching actions and link them up to the reducer.

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 

 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.

 helper to bootstrap boilerplate everything:

// store/todos.ts

import { createResource } from 'lib/resourceCreator'

export const { actions, reducer } = createResource({
  resourceName: 'todo',
  collectionName: 'todos',
})

 - Typed Redux actions - currently supporting create, read, update, destroy (and also merge and a few other things I needed universally)

 - A reducer that serves as essentially a database for you

 - So that you can efficiently query your reducer.

 - automatically defined so you don't have to hard-code them anywhere.

Then, create a controller that inherits from 

# todos_controller.rb
class TodosController < GenericObjectsController
  def resource
    Todo
  end

  def resource_params
    params.require(:todo).permit(:id,
      :title,
      :description,
      :done
    )
  end
end

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