DEV Community: ahmedgaafer

How does redux's connect work?

ahmedgaafer — Mon, 06 Feb 2023 19:29:22 +0000

Just use it dude...

This what some of my colleagues tell me when I try to understand how the magic works.

Disclaimer:
This is an over simplification of how this function works and not the actual implementation.
But it can show you how the general Idea/Implementation works

I always wondered on how the state management libs like redux inject the props to the components that I use. Now I know and let me take you to a small code snippet to explain to you how it works.

first we have our component
MyComponent.js

import { connect } from "../redux";
import { selectA } from "./selectors";

// Let us imagine that this is a react component for simplicity
function MyComponent(props) {
  console.log(props);

  props.setA();
}

const mapStateToProps = (state) => {
  return {
    myA: selectA(state)
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setA: () => dispatch({ type: "SET_A", a: 1 })
  };
};

const App = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

// simulate react call "also let us imagine that react calls it's components in that way for simplicity"
const externalProps = {
  a: 1,
  b: 2
};

App(externalProps);

This is our standard react component with the mapDispatchToProps mapStateToProps connect functions.

now let us take a dive into the connect.

First we have a global store that the connect have access for

const store = {
 a:1
}

export const connect = () =>{

};

if we look closely to the connect we can find that it is a function that takes both mapDispatchToProps mapStateToProps and returns a function that we pass our component to.

let us do that


const store = {
 a:1
}

export const connect = (mapstatetoprops, mapdispatchtoprops) => (component) => {

};

Now what should we do??

let us handle mapStateToProps first.

It is simply mapping. all we have to do is pass it the current store and it will evaluate all the values according to the function.


const store = {
 a:1
} 

export const connect = (mapstatetoprops, mapdispatchtoprops) => (component) => {
  const stateValues = mapstatetoprops(props)
};

now mapDispatchToProps

but we have to add a mock for the dispatch function for that. Let us do it.

const dispatch = (action) => {
  console.log(`DISPATCH WAS CALLED WITH ACTION`, action);
};

const store = {
 a:1
} 

export const connect = (mapstatetoprops, mapdispatchtoprops) => (component) => {
  const stateValues = mapstatetoprops(props)
};

And yes you guessed it. All we have to do now is pass the dispatch to the mapDispatchToProps.

const dispatch = (action) => {
  console.log(`DISPATCH WAS CALLED WITH ACTION`, action);
};

const store = {
 a:1
} 

export const connect = (mapstatetoprops, mapdispatchtoprops) => (component) => {
  const stateToProps = mapstatetoprops(props);
  const dispatchToProps = mapdispatchtoprops(dispatch);
};

Now that we have the evaluation of both mapDispatchToProps & mapStateToProps. The actual connect returns a react component with those values injected as props but as we are just using simple functions I will write the equivalent code to it

const dispatch = (action) => {
  console.log(`DISPATCH WAS CALLED WITH ACTION`, action);
};

const store = {
 a:1
} 

export const connect = (mapstatetoprops, mapdispatchtoprops) => (component) => {
  const stateToProps = mapstatetoprops(props);
  const dispatchToProps = mapdispatchtoprops(dispatch);

 return function () {
    component.apply(this , [
      {
        ...stateToProps ,
        ...dispatchToProps ,
        ...arguments[0] // the passed props if they exist
      }
    ]);
  };
};

Now if we open the console/ dev tools to view the logs from our function - cough couch... - component.

function MyComponent(props) {
  console.log(props);

  props.setA();
}

We find that all of the passed props, mapDispatchToProps and mapStateToProps mapped all of their values inside our function.

That is it now you know roughly how redux's connect work.

If you like this content and want me to write more of How does it work give this post a like it will tell me that you guys want more. Or write a comment telling me which topics you want me to investigate for you.

Thanks,
Ahmed S. Gaafer

I wanted to learn typescript so I built an npm package

ahmedgaafer — Fri, 11 Nov 2022 15:33:30 +0000

So you want to learn typescript 🤔

You don't want to read the 30 min handbook because reading is boring 😃

I have have the perfect solution for you...

.
.
.
.
.
.
.
.
.

🤓🤓🤓 Create a very complicated data-structures npm package fully document & test it. And create a full ci/cd pipe line to automate the docs and the tests and take 3 month doing that 🤓🤓🤓

That is exactly what I did and I love doing it
although the learning curve of the basics of the new subject is slower but the knowledge that I gained creating the npm package it huge.

I learned:

typescript ofc
testing typescript with jest
how amazing strongly typed JS is
how to publish a TS package that works on both TS and JS
data structures in depth
documentation
CI/ CD

And more…

all of this from a single side project.

Check out the package here and tell me what you think.

https://www.npmjs.com/package/@ahmeds.gaafer/ts-data-structures

How does the fetch method work

ahmedgaafer — Tue, 26 Apr 2022 17:03:06 +0000

DISCLAMER:

This series simplifies how stuff work to give you an idea of what to expect but this is not the actual code and I will include the actual docs of the steps of how stuff work with each part of this series for the super nerds out there.
If you want to know more about something or how it actually works write a comment and I might just do it.

what is the fetch method?

The global fetch() method starts the process of fetching a resource from the network, returning a promise which is fulfilled once the response is available.

How it works:

first of all we need to dissect the fetch method to understand it

we know that it takes an API string URL as a parameter
and returns a Promise

so let us implement that


function fetch2(API)
  return new Promise(resolve => {

});

Yaaay we did it!

not that fast we now need to know what happens to the API string

the fetch transforms the URL with the options if any to a Request object

You can actually pass a Request object directly.

and after that the fetch runs the Request and receives a Promise that gets resolved to a Response Object

And this is how it resolves the promise.

Remember the fetch2 function up there let us continue the implementation


function fetch2(API)
  const Response = someMagicalService(Request(API))
  return new Promise(resolve => {
   const interval = setInterval(() =>{
     if(Response.status){
      clearInterval(interval);
      resolve(Response);
     }
   }, 100)
});

the fetch keeps checking the status of the response and when a status comes the interval "Response checking" stops and the promise is resolved.

the someMagicalService part can be broken apart to multiple lines but for simplicity I just called it that

Do not forget to comment with any topic that you want to know about in some detail - as long as it is related to (JS, ReactJS) -

And leave a Heart & follow if you want to read more articles like this

References:
Fetch

The {... } is dangerous

ahmedgaafer — Wed, 12 Jan 2022 14:10:52 +0000

Spread syntax (...) allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.

I had a serious issue with the {... } operator that made the browser stop working entirely.

Let me explain:

I have an API that returns an array of objects and I want to reduce these objects to a single object.

my implementation wasthis:

const features = APIResposne.features.reduce(
                (prev, feature) => {
                    return {
                        ...prev,
                        [feature.id]: feature.value
                    };
                },
                {},
            );

the problem with this approach is that the I am copying the previous object allover again and creating a new object in each iteration which is - yes you guessed it right - taking an extra O(N)

making the reduce O(N^2) instead of O(N).

The correct solution should be:


const features = APIResposne.features.reduce(
                (prev, feature) => {

                    prev[feature.id] = feature.value;
                    return prev;
                },
                {},
            );

What to learn from this:

Easy does not mean efficient.
You should always understand how these cool operators work.

S.O.L.I.D. ???

ahmedgaafer — Wed, 15 Dec 2021 18:48:49 +0000

S.O.L.I.D.

S.O.L.I.D. is a set of guidelines for object-oriented programming that was introduced by Robert C. Marten around 1995 in response to some issues he saw in Object Oriented code

What does it fix?

RIGIDITY:

A change in the code might affect other parts of the code

FRAGILITY:

A change might lead to things breaking in unrelated places

IMMOBILITY:

Not being able to use the code outside of it's original context

It's an abbreviation for the following:

" S " Single responsibility principle
" O " Open closed principle
" L " Liskov substitution principle
" I " Interface segregation principle
" D " Dependency inversion principle

Single responsibility principle :

A Class should have only one reason to change

// We have those two classes "Circle" and "Square"

function Circle(raduis){
  this.raduis = raduis;
}

function Square(length){
  this.length = length;
}

// And we have another  Class that has method "sum"

AreaCalculator.prototype.sum = function(shapes){

  // returns the sum of all areas of the shapes provided
}

// Now we want to return some value to the user

//Does this function belong here "In the AreaCalculator class"???
AreaCalculator.prototype.output = function(){
  return `The sum of all shapes is ${this.sum()}.`
}

//NO

//What we should do is reformat this code and make a class that is responsible for handling the return

function CalculatorOutput(areas){
  this.areas = areas;
}

CalculatorOutput.prototype.good = function(){
  return `The Area of the shapes is ${this.areas.sum()}`;
}

CalculatorOutput.prototype.evil = function(){
  return 'I blocked the output Muahahaha';
}



/*
So what we now understand is that the class should only be responsible for only one function
and if we find our selves over-complicating a class or making it do more than it should.

We must refactor our code to make it cleaner.
*/

var circle = new Circle();
var square = new Square();
var shapesArray = [circle, square];

var areas = AreaCalculator.sum(shapesArray)
var output = CalculatorOutput(areas)

output.good();
output.evil();

// We can now add more output styles without altering the AreaCalculator Class

Open closed principle :

You should be able to extend a class without modifying it

Let us revisit the sum method in the array calculator


// How many times have you found your self using long if..else statements

// Does this logic belong to the area calculator ??? well, it probably doesn't
AreaCalculator.prototype.sum = function(shapes){
  var areaArray = shapes.map(shape => {
    if(shape instanceof Square){
      return Math.pow(shape.length, 2);
    }
    else if(shape instanceof Circle){
      return Math.PI * Math.pow(shape.raduis, 2);
    }
  });

  return areaArray.reduce((acc, current) => acc + current)
}

What we can do is refactor the code so that each shape has it's own area function

Square.prototype.area = function(){
  return Math.pow(this.length, 2);
}

Circle.prototype.area = function(){
  return Math.PI * Math.pow(this.raduis, 2);
}

Now as long as it follows the shape interface our "sum" function should look like this


AreaCalculator.prototype.sum = function(shapes){
  var areaArray = shapes.map(shape => {
    return shape.area();
  });

  return areaArray.reduce((acc, current) => acc + current)
}

Now we can add more shapes extinding the use of the area calculator whoithout changing any of the code.

Liskov substitution principle :

Drived classes must be substituable for their base classes

// Let us assume we have a Rectangle Class

function Rectangle(width, height){
  this.width = width;
  this.height = height;
}

Rectangle.prototype.area = function(){
  return this.width * this.height;
}

Now you want to make a square class and you know it's basically a rectangle right.


function Square(length){
  Rectangle.call(this, length, length);
}

Square.prototype = Object.create(Rectangle.prototype);

After a while you want to make a diffrent type of a rectangle and since you know that Square inherits from Reactangle you decied to inherit from Square

function BetterRectangle(width, height){
  Square.call(this, width, height);
}
BetterRectangle.prototype = Object.create(Square.prototype);

var newRectangle = new BetterRectangle(2, 3);

newRectangle.area();// RETURNS 4 instead of 6

So what happen here is it's behaving like a Square would which is not what we wanted

The solution to this is just to make Square it's own class

Interface segregation principle :

Make fine-grained interfaces with specific methods

To understand this lets look at the following example


function Shape() {};

Shape.prototype.area = function() {/* ... */}
Shape.prototype.volume = function() {/* ... */}

function Triangle(base, height){
  this.base = base;
  this.height - height;
}

Triangle.prototype = Object.create(Shape.prototype);

Did you notice what is wrong...

Triangle is a 2D shape so it has no volume so we shouldn't just keep the function like that what we should do is
split the area and the volume into two seperated classes to differentiate between the 2D shapes and 3D ones

function 2DShape() {};
2DShape.prototype.area = function() {/* ... */}


function 3DShape() {};
3DShape.prototype.volume = function() {/* ... */}

var Triangle = new 2DShape();

var Cube = new 3DShape();

Dependency inversion principle :

Depend on abstractions, not on cocretions

Assume that we have a Picture class

function Picture(color, bg){
  this.Shape = new Shape();
  this.color = color;
  this.background = bg;
}

As you can see we made a new object of Shape inside Picture

making Picture totaly dependant on Shape

take this as a general rule if you are making a new instance of some other constructor inside the defention of your constructor then you should consider refactoring.

A solution for this is to pass what you need as a parameter

function Picture(shape, color, bg){
  this.Shape = shape;
  this.color = color;
  this.background = bg;
}

var square = new Square(3);

var picture = new Picture(square, "red", "blue");

Refrences

Can we build a ReactJS Custom Hooks Repo?

ahmedgaafer — Fri, 12 Nov 2021 16:29:01 +0000

It has been a while since I made a post and I wanted to comeback with this.

I saw a recent post that talked about react custom hooks.
And I decided why not make a community repo that all people can contribute to.

I want to see your amazing ideas for custom react hooks.

here is the link to the repo: Repo

and here is how to contribute Here

I am excited to see your contributions

Fixed VS Growth Mind Sets

ahmedgaafer — Mon, 16 Aug 2021 01:26:08 +0000

So what is that...
If you are a lazy reader then this image summarizes the whole topic

|
|
|
|
|
|
|
|
|
|

You are not a lazy reader !!!

Ok, Then let us begin.

People often think that people are born with a fixed set of talents that defines them and how are they going to do in life.

For example if you find a very talented football player not actually knowing the number of hours he put into training to hone his style.

The first one to actually research this topic is Psychologist Carol Dweck, from Stanford University.

She described the two main ways people think about intelligence or ability as having either:

A fixed mindset: in this mindset, people believe that their intelligence is fixed and static.
A growth mindset: in this mindset, people believe that intelligence and talents can be improved through effort and learning.

Or in her words...

fixed mindset people believe that “they have a certain amount [of intelligence] and that's that, and then their goal becomes to look smart all the time and never look dumb”.

and

growth mindset, “students understand that their talents and abilities can be developed through effort, good teaching, and persistence.”

I believe that any thing can be achieved through effort.
Some people have more affinities in certain fields that others
and that makes them faster at exploring the field.

But only through effort that you can achieve any thing.

What do you think your mindset is??

References:

Confusing JS Explained

ahmedgaafer — Wed, 07 Apr 2021 01:29:21 +0000

JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object orientation, and first-class functions.

Some confusing parts

(([]+{})[1]+'mg').toUpperCase()  // outputs  OMG

But how is this happening

We will go into a little depth on how JS interprets stuff

I am using chrome console to test all of this

Let's Explain the line above first

the '+' sign converts the parameters to strings by using the 'toPrimitive' method
so, toString([]) returns an empty string ''
and toString({}) returns to this '[object Object]'
then the result is '' + '[object Object]' = '[object Object]'
the rest is simple, I am picking the character at index 1 'o' and just adding the 'mg' and converting all to upper case
Drum roll ........
We get "OMG"

ToPrimitive:

ToPrimitive(input, PreferredType?)

The optional parameter PreferredType is either Number or String. It only expresses a preference, the result can always be any primitive value. If PreferredType is Number, the following steps are performed to convert a value input (§9.1):

If the input is primitive, return it as is.
Otherwise, input is an object. Call obj.valueOf(). If the result is primitive, return it.
Otherwise, call obj.toString(). If the result is primitive, return it.
Otherwise, throw a TypeError.

If PreferredType is String, steps 2 and 3 are swapped. If PreferredType is missing then it is set to Number for any numeric values and to string for all other values.


1 + 1       //    2    <= Number
1 + 1 + '1' //   '21'  <= String
1 + 1 + []  //    '2'  <= String

There are some unique examples that behave differently

{} + 1  // 1 <= Number

// JS treats the '{}' in this case as its own line 

({});+1 = 1

({})+1 = '[object Object]1'

Now you can apply this principle to any addition in JS and always know the answer without being confused

references:

JSInfo
MDN