I know boiler plate in redux is well trodden ground but look at the simple app bellow.

If you familiar with the amazing hyperapp then it may look familiar. However this is plane old redux.

There are a number of good reasons you may be using redux in your work. The redux dev tools and time travel debugging is a very good one. However with redux inevitably comes boilerplate which Ihope to show is unnecessary.

Many of you i’m sure have seen the redux docs about reducing boiler plate and a lot of you will be be using action creators. Less of you will be generating reducers (but you should be). Some of you are possibly using some thing like redux box or arc which helps but i’ve not found any that really eliminate it.

How is it done?

It all starts with an “Actions Map” you can think of this as a “reducer” however note you can make these async dispatch further actions much like hyperapp.

Using this we can

1. Generate your Actions

This it the secret sauce that makes it all work.

Taking the ‘Actions Map’ we map over each key and generate a new object where each key is assigned a function that generates an action and dispatches it to the redux store automatically.

The action type generated will have the key as its name i.e “increment” and the payload will be any arguments passed.

Now we can just take our generated actions object and call the function actions.increment(3) and boom. We don’t need to stop there either as using typescript we make it all typesafey and code hinty.

2. Generate your reducers

This is pretty much the same as generating reducers listed in the redux docs and works much the same way. Its well covered so I won’t say much other than this is also type safe and all code hinty when it comes to dealing with app state.

3. Profit

Because both actions and reducers are generated from the same source we don’t need a set of action type strings floating about we have to maintain. We pass the generated actions object to our connected components so its all super clean. And just like that gone is all the boilerplate.

Where do I sign?

Its all up on github

live demo here

Is it really that easy?

Alright there is a bit of extra magic in the background need to make this work.

To create the Reducers we need the Actions so they can dispatch after async calls. To create the Actions need the Redux Store so they can dispatch on it. To create the Redux Store we need the Reducers

Maybe you can see the problem but I made it work so you don’t need to worry about that

Questions?

How do I use multiple reducers?

You don’t. Use functional lenses if you want to operate on parts of the state. I would recommend ramda. Nice getting started guide here http://randycoulman.com/blog/2016/07/12/thinking-in-ramda-lenses/