DEV Community

Pavol Ďuďák
Pavol Ďuďák

Posted on

My take on Redux

After really awesome React and Redux training at work, I’ve decided to create one simple app to solidify my newly acquired knowledge about React and (mainly) Redux and during development, I’ve come across reducer that was starting to be poorly readable (at least for me) so here’s my take on this problem.
Maybe it’s not that bad but I wanted something simpler and more readable.
Alt Text
First of all, ...state at the beginning of every case, I don’t want that but, you can’t get rid of that but you can replace it (well we can get rid of only the … spread operator)! Still, you will be writing something in every case. Can’t we make it just a one-ist function call?
Alt Text
This will replace object creation in return, we just call this function like this:
Alt Text
{ breed: payload } is OK but something with more fields can become less readable.
Just make something like createState.
Alt Text
This will replace FETCH_PICTURES_SUCCESS with just
Alt Text
and the reducer becomes more just function calls.
Alt Text
Let’s take one more example. I’ve had this piece od code in my reducer
Alt Text
and I don’t want that in my reducer, put it in state creator!
Using this pattern I’ve ended up with really clean reducer and file with functions that I call state creators separated in their own file.

If you are interested here is the app I've made (code is on prod branch).

dogBoard

just dogs




Here is Netlify link for live app it's just infinite dog pictures. Nothing special just something for me to practice react and redux.
Let me know what you think about this pattern :)
Love to see any kind criticism :)

Discussion (1)

Collapse
martynaskadisa profile image
Martynas Kadiša

I tend to go one step further and declare reducer with { ACTION_TYPE: reducer } map object.

Redux docs have an example right here redux.js.org/recipes/reducing-boil...