DEV Community: Luis "shadowtampa" Gomes

Redux Toolkit, managing states in React

Luis "shadowtampa" Gomes — Sun, 18 Sep 2022 14:03:31 +0000

React States. How do you manage them? When your application is quite small, it is okay (but not recomendable) to prop drill states. But when you have at least 5 different components or "grandson - grandfather" relationships, you need to have a solid management or your system will succumb.

What are my options?

If you are dealing with small aplications, there is no shame on utilizing useContext. It is actually quite interesting the fact that you can write your own hooks. The greatest thing about useContext is it simplicity. Write down a provider, a consumer and your hook, and you are all set. The only reason that I quit utilizing useContext was the Provider declaration. You need to wrap your main div with a provider component and that really sucks when you have 4 or more hook necessities. What leads to our next option:

Redux Toolkit

Firt things first, dont be scaried. Altought redux is a frightening word, it use is fairly simple. You need only:

A store component
A provider
A slice
A selector and a dispatcher

Store Component

The Redux store is the main component that makes all your slices available for other components. Unlike useContext, you just need to wrap your main component with a single Provider. Think as a "switch".

Provider

It is a component that you will wrap the main component or your application. It is only required once. That is the way that you are going to utilize the Store Component

Slice

Probaly you are wondering "what the heck is a slice?". A slice is your command center for managing a state. In simple backends you have a controller. A slice is nothing more than a Slice. In this component you are able to receive requests, alter states, fetch results from state and mutate then, both sync and async. For that, you'll need reducers, that are analogue to Controller methods. Sou you can have a "create reducer", a "update", and so, untill you have a CRUD.

selector and a dispatcher

Okay, you did set up your application, but how you fetch and mutate data in your components? Trough selectors and dispatchers. Selector is the way you are going to fetch data (both the whole state or destructure some props) and Dispatcher is the mutators of the data, the way you are going to utilize the CRUD reducers, for instance.

Conclusion

Redux Toolkit is the way to go for your applications, since you dont want to be stuck with multi-providing or prop drilling issues. So, dont be afraid, take a read on https://redux-toolkit.js.org/introduction/getting-started and fire on this trouble!

Set theory(with PHP)

Luis "shadowtampa" Gomes — Thu, 10 Feb 2022 17:41:01 +0000

Heres a Cheat Sheet I made for joins! Also, here are some PHP 8 examples with sets. Its important to master the basics, because in the future youll spend less time trying to build workarounds for simple solutions.

`<?php

$array_a = [1,2,3,4,5];
$array_b = [2,3,4,5,6];

function left_excluding_join($left, $right) {
return array_diff($left, $right);
}

function left_outer_join($left, $right) {
return $left;
}

function right_excluding_join($left, $right) {
return array_diff($right, $left);
}

function right_outer_join($left, $right) {
return $right;
}

function full_join($left, $right) {
return array_unique(array_merge($left, $right));
}

function inner_join($left, $right) {
return array_intersect($left, $right);
}

function outer_excluding_join($left, $right) {
return array_diff(full_join($left, $right), inner_join($left, $right));
}

echo "=== LEFT EXCLUDING JOIN ===\n";
print_r (left_excluding_join($array_a, $array_b));

echo "=== LEFT OUTER JOIN ===\n";
print_r (left_outer_join($array_a, $array_b));

echo "=== RIGHT EXCLUDING JOIN ===\n";
print_r (right_excluding_join($array_a, $array_b));

echo "=== RIGHT OUTER JOIN ===\n";
print_r (RIGHT_outer_join($array_a, $array_b));

echo "=== FULL JOIN ===\n";
print_r (full_join($array_a, $array_b));

echo "=== INNER JOIN ===\n";
print_r (inner_join($array_a, $array_b));

echo "=== OUTER EXCLUDING JOIN ===\n";
print_r (outer_excluding_join($array_a, $array_b));
`

And the results:

=== LEFT EXCLUDING JOIN === Array ( [0] => 1 ) === LEFT OUTER JOIN === Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 ) === RIGHT EXCLUDING JOIN === Array ( [4] => 6 ) === RIGHT OUTER JOIN === Array ( [0] => 2 [1] => 3 [2] => 4 [3] => 5 [4] => 6 ) === FULL JOIN === Array ( [0] => 1 [1] => 2 [2] => 3 [3] => 4 [4] => 5 [9] => 6 ) === INNER JOIN === Array ( [1] => 2 [2] => 3 [3] => 4 [4] => 5 ) === OUTER EXCLUDING JOIN === Array ( [0] => 1 [9] => 6 )

CORS: Explaining with food.

Luis "shadowtampa" Gomes — Thu, 27 Jan 2022 13:07:54 +0000

CROSS-ORIGIN Resource Sharing is a policy for requesting information from a source different than yours, going against the standart same-origin policy in most of the browsers. Picture yourself having food at your home. That delicious meat that your mother cooks that is, hhhmmm, delicous, and you believe in her hands, because you know she cleans her hands, she bathes: same-origin provides you safety. But I doubt that your mom can cook a milk shake and a Big Mac in less than 5 minutes. So you order food, and unless you live inside a MCdonalds, the delivery will come from a different origin. But you know if the cooker has knowledge of ... soap? If he actually cleans his hands? Not same origin, or shorten, cross-origin is dangerous most of the times. Thats why your browser locks it up.
For further and better reading, have this link: https://web.dev/cross-origin-resource-sharing/

College and Code

Luis "shadowtampa" Gomes — Thu, 27 Jan 2022 12:52:09 +0000

Are you in college? That is one of the best opportunities that you will ever have... for social skills. College is not a place to learn to code. In fact, is the hotspot for networking. The biggest mistake I made back in 2017 when I entered college was the false notion that I would become the "hackerman" as soon as I entered the college... But for sure I made friends. Still do. If theres a hot tip for college newbies, it would be: learn to be a self-taught, self-sufficient machine of advancements. Then, and only then, college will begin to help you.