react
May 9, 2018

Attempt to understand basic terms of react and redux

To learn a new tech is like to blow a balloon. At the beginning it is very hard go trough the first 15%, but after that it always pays off.

So I needed to start to code on React. I went through the tutorial, some guides and I felt like I code it, but it was a mistake :D

Once I started to actually implement first feature on React I hit the first mental problem: "I do not like props".

From my experience I learned that if you don't like something it means that you don't understand it, so I decided to dig deeper to the props and what does it actually mean.

Why developers called it "props"? Why not "parameters", "settings", "variables" or something else which is more common for dummy developers?

At first I googled "props" and got a definition from dictionary: "proper or due respect or recognition; credit:" which didn't make it clear at all.

Next, I tried to find the clear definition of the "props" term in React: "Most components can be customized when they are created, with different parameters. These creation parameters are called props.". And that definition is already something.

But if we will go further we can find another the definition of "prop":

  1. prop is an object which supports another - sounds logical as in react props is an arbitrary object that should be sent to react component on creation
  2. Also there is a definition of PROP as abbreviations from category theory (wiki). But from the first attempt I could not find the correlation between react props and category theory props, although I met in the internet the idea that react props were taken from category theory.

The next question is coming from redux api functions "mapStateToProps" and "mapDispatchToProps". If we will take a previous definition, then it will sound like: "mapStateToCreationalParameters" and "mapDispatchToCreationalParameters", but is it a right definition?

mapStateToProps(mapStateToCreationalParameters): If mapStateToProps called (see redux tutorial), then it means that your component will be subscribed on certain redux states update. For ex. if you call mapStateToProps for field "time" in redux store, then every time that field's value changes - react will re-draw your component. So it works like publish-subscribe. You as a developer subscribe you component to be re-rendered with new values every time certain field in redux will change.

mapDispatchToProps(mapDispatchToCreationalParameters): it was a bit tricky to find a good info on what is it and why do you need it. Nevertheless here is what I understood:

Standard component wants to be updated if some state changed by another component and here we use mapStateToProps, but if in current component user performs some interactions that need to fire an action that will update state of redux store. The right way to do it is to separate action entity from the component so it will be reusable and integrate to component so that redux will know about it.