DEV Community: Pavol Ďuďák

My take on Redux

Pavol Ďuďák — Tue, 03 Sep 2019 17:14:04 +0000

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.

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?

This will replace object creation in return, we just call this function like this:

{ breed: payload } is OK but something with more fields can become less readable.
Just make something like createState.

This will replace FETCH_PICTURES_SUCCESS with just

and the reducer becomes more just function calls.

Let’s take one more example. I’ve had this piece od code in my reducer

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).

dudakp / dogBoard

just dogs

dogBoard

just dogs

View on GitHub

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 :)

What hides under JSX

Pavol Ďuďák — Tue, 27 Aug 2019 16:56:45 +0000

I finally pushed myself to write next post so, here it is.

So, JSX. A really familiar, simple and handy thing for writing components in React. But markup in JS? Kinda weird no? Well, it’s not markup but valid JS expressions, after transpilation just function calls that evaluates to objects, objects representing React components. Let’s grab a simple component:

Just a simple picture frame for grid gallery. The first thing you will probably notice is className. In HTML it’s just class but here, because naming conflict with JS class keyword it is className. All attributes are in camelCase in JSX.
JSX is only expressions remember? That is one of the reasons why camelCase is used. Let’s move on.
One really important thing to remember for components is to return only ONE React element. Here img tag is enclosed within div tag.
In bigger components where you need to return multiple tags (components) the React approach is to enclose elements in React.Fragment tag or shorter version just empty tag. React will notify you about this if you don't do it. It prevents appending redundant tags in DOM that can sometimes produce invalid HTML.
But how is JSX just JS expressions? You can write the same JSX just like this:

And this is what transpiler does to our JSX. Just transforms it into this so it can be appended to virtual DOM, but that is a whole other topic.
You can see how ugly nested and verbose can components get without JSX. As in the first snippet when we are setting src in img tag prop pic is enclosed in { curly braces }. All JS expressions in JSX must be enclosed in { curly braces } so React can tell what to render and what to evaluate as JS. Probably the last thing is that as in the previous sentence I’ve said “All JS expressions” emphasis on expression. You can’t use if statement, for or while loops in JSX. But, we can substitute if statements with ternary expressions and since glorious ES6 loops with calling map, forEach, etc. on arrays. Heres an example of map function and usage of our first component:

Somewhere where this snippet lives we have an array of objects including links to dog pictures called ‘doggos’. We are calling map function on this array (which as you probably know iterates through the array and applies provided a function on every element and returns new array). The returns part is important since in JSX we are using only expressions that evaluate to something in our case a new array containing React components.
I hope that my explanation vas understandable and maybe can help someone to better understand React. Also, any questions are welcome.
Thank you for getting to the end of this post. You can suggest in the comments what you want next :)

Simple CSS animated loading icon

Pavol Ďuďák — Wed, 31 Jul 2019 10:38:51 +0000

Hello!
I've recently got my first real programming job as a junior programmer and I'm still learning various thing along the way. Also, some time ago I have started thinking about writing some blog post to this site so here is my first attempt :)

For my first post, I've wanted to write about something simple so there is less space for me to make mistake :) so I've made a simple animated loading icon with CSS.

Here is codepen:

The animation is based on keyframes as you can see.
Basically,I'm just scaling and rotating html element and infinitely looping animation with alternating direction with means that keyframe animation is played forwards and then backward with ease-in-out timing function that sets the speed of the animation. The ease-in-out timing function plays animation starting and ending slowly. For example, if I've used ease-in function the animation will start slowly.

Any feedback positive or negative is highly appreciated! :) I'm looking forward to write about more stuff I've learned (including Spring, React and maybe Angular)

Thank you for reading :)