DEV Community: Pedro Uzcátegui

Full Redux Overview pt.1 - Actions, Reducers, Slices, Store, Dispatch, Selectors, with React and Typescript

Pedro Uzcátegui — Tue, 15 Nov 2022 18:12:32 +0000

Redux is a library that is based on the Flux Philosophy

Flux is a pattern, or general architecture.

Flux propses a single undirectional data flow, one at a time, this is a circular flow composed of 3 actors: Dispatcher, Stores and Actions.

Actions: Structure that describes any change in the system: Mouse Clicks, Timeout Events, Ajax Requests, so on.

Actions are send to dispatchers.

Dispatcher: Is a function where we have an action and we dispatch the function regarding to that action. And in consequence, that action is going to "modify" the state.

State: Is the global data object of our application, is divided by stores.

Store: Is a piece of the application state. Reacts to commands from the dispatcher.

Here is the simplest Flux flow:

Stores subscribe to a subset of actions.
An action is sent to the dispatcher.
The dispatcher notifies subscribed stores of the action.
Stores update their state based on the action.
The view updates according to the new state in the stores.
The next action can then be processed.

Why Redux?

Redux is ideal for big projects, since it helps to share data throughout the application without having to relate into state and re-renders issues. Also, if you're not using react, then you might know that JavaScript is not a very opinionated language in the way to do things, and redux provides that structure to avoid having to guess where functions do what thing.

Observer Pattern and the relationship with Redux

Redux can be seen as an implementation of the observer design pattern.

An Observer, defined as a Behavioral Design Pattern, let's you define a subscription mechanism to notify multiple objects about any events that happen to the object they're observing.

The observer pattern consists of 2 objects: A Publisher, that is an object that contains all of the subscribers, can add and remove subscribers, and A Subscriber, simply the object that wants to be notified about a certain event.

When an event happens to the Publisher, this is going to inform to the subscribers about it.

All subscribers must share the same interface because we don't want to couple or redefine our publisher to various types of subscribers.

Redux works in a similar way.

Reducers

You can think of reducers as some type of microservice that is going to handle a set of specific actions of a store.

Reducers and Dispatchers in Redux

In Flux, you can have multiple stores and dispatchers.

In Redux, you don't have dispatchers and you only have 1 store. Instead of adding stores, you divide this store into smaller reducers.

In Redux, a reducer is similar to a Flux Dispatcher.

In Redux, a reducer is a function that accepts an action, and the current state, and when called, returns a new state depending on which action needs to be performed.

They receive that name because the similarity with the Array.reduce() function.

Rules of Reducers

They make immutable changes, this meaning that instead of updating the state, it creates a copy of the old state, modify that copy, and the put that copy as the new original.
It doesn't produce side-effects, meaning that it can't be asynchronous, it can't be random (pure functions)
It should update the state only using the state and action arguments.

Having a single source of data makes debugging, testing and development easier.

Redux Terminology in Depth

Actions

In Redux, the only way we change the state, is by using actions.

In practice, actions are just plain JavaScript Objects, that contains 2 things: An action type (string), and the payload (object).

{
  type: 'INCREMENT',
  payload: {
    counterId: 'main',
    amount: -10
  }
}

Is common that we usually perform some logic before sending this action object, so is common to see that these objects are wrapped in functions as well.

function incrementAction(counterId, amount){
  return {
    type: 'INCREMENT',
    payload: {
      counterId,
      amount
    }
  }
}

This type of functions are called action creators.

Reducers

Ok cool, we have our payload and we have our action creator function, know if we send this action to the state, how do we effectively increase the amount? How do we get the old state?

Here is where we want to introduce Reducers:

A Reducer is a function that receives 2 things: The state of the application and an action object. We already know how the action object looks like, so we can seize the action object and the state to perform the state change logic.

function rootReducer(state, action){
  switch(){
    case 'INCREMENT':
      return { ...state, counter: state.counter + action.payload.amount };
    default:
      return state;
  }
}

Remember, in Redux application there will be only 1 state and that state is going to have a rootReducer function, that is going to call additional reducer functions to calculate the nested state.

Middlewares

This is a more advanced topic in Redux, but we can create some sort of interception before updating the state or passing actions to the store. We can check if an action is of certain type and do something before the action is dispatched, log out the information of the action payload, etc.

Let's make a quick pause here, to mention something: Redux is all about functional programming and pure functions. Understanding those concepts is crucial to understand Redux.

Pure Functions

Pure functions are functions that only uses its arguments to return its certain value.

These functions are called pure because it will give you the same result every single time you run them.

It doesn't rely on any type of modifier, external network events, doesn't change any data structure, etc.

function square(x){
  return  x * x;
}

When a function use some external argument, or network, or something that could potentially affect the result of the function, this thing is called a side effect.

Fetch() calls are side effects.
Events like windows resize, mouse clicks, network calls, are side effects.
Math.random() is a side efefct.

Example of an impure function

function getUser(userID){
  return UserModel.fetch("user/"+userID).then((result) => result);
}

Why is this function impure?

It contains an variable that is not related to the scope of the function (UserModel)
It contains a network call that is asynchronous and is not guaranteed to return the same value forever (fetch())

Immutability

In Redux, we don't modify the state, we copy the older state, modify that copy, and set the copy as the new original.

In JavaScript, we are still very limited in terms of Immutability, let's check this example:

const colors = {
  black: "000000",
  white: "ffffff",
  red: "ff0000"
}

This is a constant in JavaScript. The behavior is a little weird:

If we change the actual reference, it will throw an error:

const colors = {
  black: "000000",
  white: "ffffff",
  red: "ff0000"
}

colors = "something else" // This will throw an error.

This is expected, but what if we change only a property of the constant object?

const colors = {
  black: "000000",
  white: "ffffff",
  red: "ff0000"
}

colors.red = "something else" // OK

So this could lead to unintended behavior, and is not something very good to have when working with Redux. So instead, Redux internally uses Immer.js, a library to make things immutable!

Also, you can frooze the object using the Object.freeze() method and passing the object inside the Object.freeze() method.

Object.freeze(colors);

colors.red = "000000";

console.log(colors.red) //  Still "ff0000";

But hey, not so fast my dear blue hedgehog fan. Object.freeze() will not make subnested objects and its properties immutable. So as you can tell, working with immutability inside JavaScript is not a very delightful experience.

Let's make our own application using redux, react-redux, and redux toolkit.

Simple Counter Application With React and Typescript

0. Create a vite project using `npm create vite`

npm create vite

Select the react -> typescript preset

1. Install the react-redux dependency

  npm install react-redux

2. Install "@reduxjs/toolkit" dependency

  npm install @reduxjs/toolkit

3. Create a Provider an pass the store to it

Every react application that uses redux needs a provider, this provider is commonly used at the top level of our application, in our case, is going to be App.tsx, that provider coms from react-redux.

import './App.css'
import { Provider } from "react-redux"
import Counter from './components/Counter'

function App() {
  return (
    <Provider>
      <Counter/>
    </Provider>
  )
}

export default App

Don't worry right now if the provider is giving you an error, or if you don't know how the Counter component looks right now, just copy that as it is.

Redux requires that a store.ts file is created under the app directory. This directory doesn't exist by default in vite, so let's create an app/store.ts file.

Copy this code into your store.ts file, is pretty much boilerplate to configure the store.

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
    reducer: {}
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Now, we can pass that store to the provider inside the App.tsx file.

import './App.css'
import { Provider } from "react-redux"
import { store } from './app/store'
import Counter from './components/Counter'

function App() {
  return (
    <Provider store={store}>
      <Counter/>
    </Provider>
  )
}

export default App

Excelent! That's all we need to do for our App.tsx file, let's now configure our slice. In this example since we're creating a counter, let's create a counterSlice.ts

But hey, BEFORE YOU DO THAT!!!!

We need to store all of our slices inside a folder called features that will be in the same level as our previous app folder.

Here is a reference image:

Now, let's create that counterSlice.ts file inside the features folder.

import {createSlice, PayloadAction} from "@reduxjs/toolkit";
import type { RootState } from "../app/store";

// We need to create a type for the slice state
interface CounterState {
    value: number
}

// Define the initial state using the previously defined state type
const initialState: CounterState = {
    value: 0
}

export const counterSlice = createSlice({
    name: "counter", // name of the slice,
    initialState, // thanks to this object is that we know the type of the state
    reducers: { // Reducers are the logic on how to process certain actions
        increment: (state) => {
            state.value += 1
        },
        decrement: (state) => {
            state.value -= 1
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
            state.value = action.payload
        }
    }
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions; // We need to export the actions from the counterSlice object, actually we are exporting the reducers.

export const selectCount = (state: RootState) => state.counter.value;

export default counterSlice.reducer; // Difference between this and the actions export.

Yeah I know, is very overwhelming code, so let's explain what each thing does:

Lines 1 - 2

import {createSlice, PayloadAction} from "@reduxjs/toolkit";
import type { RootState } from "../app/store";

These are simply imports of things we are going to need, the createSlice function that allows us to create a store slice, the PayloadAction type that allow us to specify the type of the expected payload, and the RootState that we are going to use to define a get our current counter value.

Lines 5 - 11

interface CounterState {
    value: number
}

const initialState: CounterState = {
    value: 0
}

This is the type that we're going to use to declare our initialState, is very important because is going to infer the rest of the reducers.

We use immediately that type and pass it to the initialState object.

Lines 14 - 28

export const counterSlice = createSlice({
    name: "counter", // name of the slice,
    initialState, // thanks to this object is that we know the type of the state
    reducers: { // Reducers are the logic on how to process certain actions
        increment: (state) => {
            state.value += 1
        },
        decrement: (state) => {
            state.value -= 1
        },
        incrementByAmount: (state, action: PayloadAction<number>) => {
            state.value = action.payload
        }
    }
});

So if we recall the definition of slice, is simply a part of the state, we can see it as a property of the state object, and this property can act as its own state.

We need to specify the name of our slice, in this case simply "counter", then we pass the initialState as the second property, and then we define a reducers property object.

Here, in each reducer, we are going to define functions that are going to be used to update the state of this slice. We have 3 reducers/actions: increment, decrement, and incrementByAmount.

As you can see, we're using the state as the first parameter to perform calculations, and in the third and last function, we're using the payload to increment the value of our counter.

The rest of the lines 30 - 34 are simply exports of the actions that we're going to pass to our hooks and the reducer itself.

4. Defined Typed Hooks

Now, since we're using typescript, we need to pass the state to our selector, but since doing this every time is not a good practice, we're going to define an app/hooks.ts file that we're going to use to re-define our hooks in a way that is reusable and good for typescript.

import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store'

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch: () => AppDispatch = useDispatch
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

So instead of calling useDispatch and useSelector directly, we now are going to use useAppDispatch and useAppSelector.

5. Pass that slice to the root state inside store.ts

Now that we have our hooks and slice ready, let's inform the root state about this new slice, we do that by specifying the new slice inside the reducer.

Note that is not common to call the reducer object properties as "slices" inside the reducers object from the store.ts, but just export default as counterReducer instead of counterSlice, but for the sake of the tutorial, we're going to use the latter.

import { configureStore } from "@reduxjs/toolkit";
import counterSlice from "../features/counterSlice";

export const store = configureStore({
    reducer: {
        counter: counterSlice
    }
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

6. Then use useAppSelector and useAppDispatch to get and update state accordingly.

Now we can get the state using our useAppSelector hook and we can make changes by using the useAppDispatch hook.

import { useAppDispatch, useAppSelector } from "../app/hooks";
import { decrement, increment } from "../features/counterSlice";

export default function Counter(){
    const count = useAppSelector((state) => state.counter.value); 
    // state.counter -> store.ts
    // state.counter.value -> counterSlice.ts
    const dispatch = useAppDispatch(); // We use this to dispatch actions, send actions
    return(
        <div>
            <button onClick={() => dispatch(increment())}>+</button>
            <span>
                {count}
            </span>
            <button onClick={() => dispatch(decrement())}>-</button>
        </div>
    )
}

We need to import our actions from the slice to pass it to our dispatch functions, then we just need to test and that's it!

Now try it and that's it, you have your first app with react, typescript and redux!

Differences between redux, reduxjs/toolkit and react-redux.

Reduxjs

Standard library that is used to manage global state.

Ton of boilerplate code
Contains an actions and reducers folders that lived separated, and a store.js file.
Framework Agnostic

Redux Toolkit or RTK

More opinionated and simpler library based on ReduxJS to manage global state.

Is more opinionated than simpler redux about how to do things.
Contains the special app and features folder to create our hooks, slices, and store.
Features like extraReducers, async thunks, and slices are simpler to implement than redux.

react-redux

Library used to pass store providers to react applications and hooks like useSelector and useDispatch.

Let me know if you have any questions and stay tuned for part 2!

Github Repo: https://github.com/pedrouzcategui/react-redux-project-1/tree/main (Make sure to 💖 the repo)

React.js Controlled vs Uncontrolled

Pedro Uzcátegui — Fri, 04 Nov 2022 01:18:45 +0000

Controlled Components

These components are controlled by react state. For example, if we have a form, and we have the model of that form represented by a react state, and the inputs are linked as two way binding (menaning that changing the input value will change the react state, and that input value is going to be the value of that state) then we have a controlled component.

We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input.

import { useState } from 'react';

function App() {
  const [name, setName] = useState('');

  function handleSubmit() {
    alert(`Name: ${name}`);
  }

  return (
    <div className="App">
      <h3>Controlled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name:</label>
        <input name="name" value={name} onChange={(e) => setName(e.target.value)} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

Uncontrolled Components

These components, by definition, are not controlled by the react state, but by the DOM (Document Object Model)

These components uses ref to access their own state.

Usually, uncontrolled components are dependant on the browser, like Inputs of every type, Window Resizing, HTML Canvas Elements, and so on.

import React, { useRef } from 'react';

function App() {
  const inputRef = useRef(null);

  function handleSubmit() {
    alert(`Name: ${inputRef.current.value}`);
  }

  return (
    <div className="App">
      <h3>Uncontrolled Component</h3>
      <form onSubmit={handleSubmit}>
        <label>Name :</label>
        <input type="text" name="name" ref={inputRef} />
        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

export default App;

For example, In React, an is always an uncontrolled component because its value can only be set by a user, and not programmatically.

Anything that we control with the DOM that can't be done with a React State, we do with Refs.

React Refs

When you want a component to “remember” some information, but you don’t want that information to trigger new renders, you can use a ref. - https://beta.reactjs.org/learn/referencing-values-with-refs

The common way to use refs in functional components is to useRef() hook.

const LoginPage = () => {
    const passwordRef = useRef(null);

    const handleSubmit = (e) => {
        e.preventDefault();
        alert(`This is your password ${passwordRef.current.value}`)

    }

    return(
        <form onSubmit={handleSubmit}>
            <input type="email" name="email"/>
            <input type="password" name="password" ref={passwordRef}/>
        </form>
    )
}

Is recommended to initiallize refs to null, since is the DOM is not mounted when loading the page and will not know about the input value beforehand.

We also can forward refs, is not very used in react, but we can use React.forwardRef() to create components that forwards ref to child components.

const Button = React.forwardRef((props, ref)=>(
    <button ref={ref} className="FancyButton">
        {props.children}
    </button>
));

// Now we can pass forward refs to this component.
const buttonRef = useRef(null);
<Button ref={ref}>Click me!</Button>

Stay tunned for more software engineering posts!

Typescript Classes Pt.1

Pedro Uzcátegui — Thu, 03 Nov 2022 02:18:53 +0000

Initializing a class

To initialize a class, we first need to define a class, then its members, and then we can create an object for that class using the new keyword.

class Point {
  x: number,
  y: number
}

let pt = new Point();
pt.x = 0
pt.y = 0

We can also initialize a class with default values, or without type annotations, but then, the member of the class will be implicit any.

class Point {
  x = 0,
  y = 0
}

let pt = new Point();

console.log(pt.x, pt.y)

We can specify strict property initialization within the typescript configuration file.


// ---strictPropertyInitialization
class GoodGreeter {
  name: string;

  constructor() {
    this.name = "hello";
  }
}

Definite Assignment Assertion Operator

If you plan to initialize a certain property inside a class in another way that is not a constructor, then make sure to use the ! operator to make sure Typescript understand that this is going to be assigned later.

class OKGreeter {
  // Not initialized, but no error
  name!: string;
}

Readonly Properties

If we want only a class to contain a readonly property, we can use the readonly keyword to make it read only. We also can pass the initial value in the Object Instantiation and then make it readonly.

class Greeter {
  readonly name: string = "world";

  constructor(otherName?: string) {
    if (otherName !== undefined) {
      this.name = otherName;
    }
  }

  err() {
    this.name = "not ok";
  }
}

let g = new Greeter("Pedro");
g.name // Pedro
g.name = "Juan" // Error, cannot assign value to readonly property.

Constructor Overloads

Two functions can have the same name if the number and/or type of arguments passed is different. This is called a function overload.

We can pass multiple constructor functions, only if the functions parameters are different from one another.

In languages like C++, you can define multiple implementations of the same function, just the return type is different.

But in the case of typescript, we can define the overloads, but only one implementation.

class Point {
  // Overloads
  constructor(x: number, y: string);
  constructor(s: string);
  constructor(xs: any, y?: any) {
    // TBD
  }
}

Extending a class

As programmers, we need to look for ways to re-use our code so we can save up some space and make easier the development process.

Sometimes, we want objects to behave a certain way, so we have classes, that serves us as a way to create objects from a template.

But sometimes, we want those templates in certain objects to do more than the things those classes are defined to do, we want to extend the functionality from those objects.

In this case, we say that we want to extend the functionality of a class.

class Person {
  readonly name: string,
  readonly age: number
  constructor(name: string, age: number){
    this.name = name;
    this.age = age;
  }
}

class Employee extends Person{
    jobTitle: string,
    constructor(name:string, age:number, job:string){
        super(name, age);
        this.jobTitle = job
    }
}

The super() method of a class.

When we are extendidng a class, we need to call the constructor of the parent object to access its properties. We do this with the super() method.

super is an object that can access functions on the parent object.

The super() method, calls the constructor of the parent object.

There is a rule to remember: We need to call super() before accessing any reference to this.

Extends vs Implements in OOP

Implements: Check if a certain subclass is using implementing correctly another class.

interface Pingable {
  ping(): void;
}

class Sonar implements Pingable {
  ping() {
    console.log("ping!");
  }
}

class Ball implements Pingable {
  pong() { // Class 'Ball' incorrectly implements interface 'Pingable'. Property 'ping' is missing in type 'Ball' but required in type 'Pingable'.
    console.log("pong!");
  }
}

Implements

Implements is only to check that certain subclass is implementing the parent class correctly, is not going to change any types inside it.

interface Checkable {
  check(name: string): boolean;
}

class NameChecker implements Checkable {
  check(s) { // Parameter 's' implicitly has an 'any' type.
    // Notice no error here
    return s.toLowercse() === "ok";
  }
}

Classes can also implement multiple interfaces.

Implementing a class with optional properties will not create that property in the derived subclass

interface A {
  x: number;
  y?: number; // This is optional, not required to check in implementation.
}
class C implements A {
  x = 0;
}
const c = new C();
c.y = 10;
// Property 'y' does not exist on type 'C'.

Extends

Whereas implements is only to check if a certain class is implementing the properties and functions correctly, extends will pass all of the properties and methods to the derived subclass. And can be used to define additional members.

class Animal { // Base Class
  move() {
    console.log("Moving along!");
  }
}

class Dog extends Animal { // Contains access to move()
  woof(times: number) {
    for (let i = 0; i < times; i++) {
      console.log("woof!");
    }
  }
}

const d = new Dog();
// Base class method
d.move();
// Derived class method
d.woof(3);

Methods in Typescript Classes

Methods are functions defined inside classes, and properties are variables that contains some sort of data.

class Person {
    name:string // Property
    constructor(name:string){
        this.name = name;
    }

    greet(): void { // Method
        console.log(`Hello! My name is ${this.name}`)
    }
}

class Point {
  x = 10; // properties
  y = 10;

  scale(n: number): void { // methods
    this.x *= n;
    this.y *= n;
  }
}

To access the properties of an object, is mandatory to use the this keyword, this will modify the context where the property is being called to use the class scope, instead of any global scope.

Getters and Setters in Typescript

Getters and Setters are special methods inside a class that allows a class to protect the data from manipulation in an outside context that is not the class definition.

Getters and Setters are known also as classes accessors.

class C {
  _length = 0;
  get length() { // We use the `get` keyword to specify that this is going to be a member that when is accessed, is going to return the length of the property.
    return this._length;
  }
  set length(value) { // Here we can call .length() to set the property value.
    this._length = value;
  }
}

By convention, the methods that are private inside a class

There are special rules when using getters and setters in Typescript:

If get exists but no set, the property is automatically readonly
If the type of the setter parameter is not specified, it is inferred from the return type of the getter
Getters and setters must have the same Member Visibility

Note: Is also possible to use get and set with multiple types

class Thing {
  _size = 0;

  get size(): number {
    return this._size;
  }

  set size(value: string | number | boolean) {
    let num = Number(value);

    // Don't allow NaN, Infinity, etc

    if (!Number.isFinite(num)) {
      this._size = 0;
      return;
    }

    this._size = num;
  }
}

Overriding methods in extended classes

class Base {
  greet() {
    console.log("Hello, world!");
  }
}

class Derived extends Base {
  greet(name?: string) {
    if (name === undefined) {
      super.greet();
    } else {
      console.log(`Hello, ${name.toUpperCase()}`);
    }
  }
}

const d = new Derived();
d.greet();
d.greet("reader");

In the previous example, if the name is not provided in the derived greet() method, It will make use of the super.greet() (parent) method.

We have 4 types of member visibility.

Public: By default, all of the members of a class, are public by default, is even not required to write the keyword public, but you might do it for style/readability reasons.
Protected: These members of a class, are only accesible within the class or derived subclasses.

This will mean that you can't access them outside the class definition.

class Person {
    public name: string,
    protected bloodType: string,
    constructor(name: string, bloodType: string){
        this.name = name
    }
}

class Employee extends Person {
    public job: string,
    constructor(name: string, bloodType: string, job: string){
        super(name, bloodType);
        this.job = job;
    }
}

let emp = new Employee("Bob","O-","Software Engineer");
emp.job // "Software Engineer"
emp.bloodType // Property 'bloodType' is protected and only accessible within class 'Greeter' and its subclasses.

If a protected member in a base class is not protected in a derived subclass, then this member will proceed to be a public member.

class Base {
  protected m = 10;
}
class Derived extends Base {
  // No modifier, so default is 'public'
  m = 15;
}
const d = new Derived();
console.log(d.m); // OK

Private: Same deal as protected, but in this case, it doesn't allow the other derived subclasses to access these members.

There is a way to make a member hard private, with the # operator:

class Dog {

  #barkAmount = 0;
  personality = "happy";

  constructor() {}
}

Static: Any member marked as static can be accessed inside or outside the class definition, and the feature is that you can access this methods without having to instantiate the class object.

class MyClass {
  static x = 0;
  static printX() {
    console.log(MyClass.x);
  }
}
console.log(MyClass.x);
MyClass.printX();

Stay Tunned for Part 2!

Typescript Interfaces and Generics.

Pedro Uzcátegui — Tue, 01 Nov 2022 19:51:49 +0000

If you're like me and are used to functional programming and don't touch OOP, or do it very rarely, then this tutorial is for you.

Objects in Typescript

Let's suppose that a function receives an object, and you want to write some types for the parameters.

function getFirstName(person: {name: string, lastname: string}){
  return person.name;
}

Now, this is useful in this function, but what if we want to duplicate this object into a different function?

// Bad example
function getFirstName(person: {name: string, lastname: string}){
  return person.name;
}

function getLastName(person: {name: string, lastname: string}){
  return person.lastname;
}

This is effective, but is not efficient, because this would mean that if we want to emulate or replicate this literal object type, we would need to define again the same object into every parameter of the functions.

Which would be the most efficient way to replicate that type? We could use types:

type Person = {
  name: string,
  lastname: string,
}

function getFirstName(person: Person){
  return person.name
}

Or we could use interfaces:

interface Person {
  name: string,
  lastname: string,
}

function getFirstName(person: Person){
  return person.name
}

Typescript Interfaces

The examples above are great, but when we need to use one or another? Well, let's suppose you have an address and an extended address types.

type Address = {
  city: string,
  state: string,
  country: string,
  postalCode: number
}

type ExtendedAddress = {
  street: string,
  houseNumber: number,
  region: string,
  city: string, // The rest of the object from here is the same as the type Address 
  state: string,
  country: string,
  postalCode: number
}

We know are looking at some duplicated lines of code. We could save some space if we implement another mechanism that allows us to inherit all of the properties in the Address type and allow us to define new properties besides those ones.

We are looking to extend an interface!

interface Address {
  city: string,
  state: string,
  country: string,
  postalCode: number
}

interface ExtendedAddress extends Address {
  street: string,
  houseNumber: number,
  region: string
}

Now, extended address contains all of the properties inside the Address interface!

Extending from multiple interfaces.

Also, another neat trick is that we can as well extend from multiple interfaces!

interface Colorful {
  color: string
}

interface Circle {
  radius: number
}

interface ColorfulCircle extends Colorful, Circle {} // The curly braces at the end means that we're not passing any properties to the interfaces.

const cc: ColorfulCircle = {
  color: "red"
  radius: 42
}

Intersection Types

We can achieve the same behavior as above performing an Intersection Type

interface Colorful {
  color: string
}

interface Circle {
  radius: number
}

type ColorfulCircle = Colorful & Circle;

We can also pass the intersection type directly to the parameters in the function if we believe that is not necessary to produce a new intersection type

function draw(circle: Colorful & Circle) {
  console.log(`Color was ${circle.color}`);
  console.log(`Radius was ${circle.radius}`);
}

// okay
draw({ color: "blue", radius: 42 });

// oops, misspelled "radius", this will prompt an error.
draw({ color: "red", raidus: 42 });

Generics in typescript

When we want to reuse a type or an interface using different data types, we might use generics to describe this behavior.

function setContents<Type>(box: Box<Type>, newContents: Type) {
  box.contents = newContents;
}

const box: Box<string>;
setContents(box, "Hello");
box.contents // "Hello";

We can reuse this easily because we can specify the Type when we call the function.

Nested Generics

One of the most essential things to work in real life projects, is to understand these nested generics. Those could be seen as a pain in the ass to understand (and in some occasions, they are).

But is really not that hard if we know the types we're receiving from the parent types.

type OrNull<Type> = Type | null;

type OneOrMany<Type> = Type | Type[];

// In this next implementation, we're using the OneOrMany generic, that can be one or many of the specified type.

// Here, we have the OneOrManyOrNull type, this could mean that we could expect to have (Type | Type[]) | null

// You could go an replace the types to understand them better!

type OneOrManyOrNull<Type> = OrNull<OneOrMany<Type>>;

type OneOrManyOrNull<Type> = OneOrMany<Type> | null

type OneOrManyOrNullStrings = OneOrManyOrNull<string>;

Array Generic

Typescript allows us to work with some of the pre-defined generics that can be helpful to specify certain behaviors with certain data types, like arrays.

This is the formal definition of the Array generic:

interface Array<Type> {
  /**
   * Gets or sets the length of the array.
   */
  length: number;

  /**
   * Removes the last element from an array and returns it.
   */
  pop(): Type | undefined;

  /**
   * Appends new elements to an array, and returns the new length of the array.
   */
  push(...items: Type[]): number;

  // ...
}

An example of this could be like:

function doSomething(value: Array<string>) {
  // ...
}

let myArray: string[] = ["hello", "world"];

// either of these work!
doSomething(myArray);
doSomething(new Array("hello", "world"));

We also have some other generics like Map<>, Set<> and Promise<>.

We also have an special type of array generic, the ReadonlyArray!

function doStuff(values: ReadonlyArray<string>) {
  // We can read from 'values'...
  const copy = values.slice();
  console.log(`The first value is ${values[0]}`);

  // ...but we can't mutate 'values'.
  values.push("hello!");
Property 'push' does not exist on type 'readonly string[]'.
}

We can assign values to a readonly array in its declaration, but we can't modify it or use it as a value

// This is correct.
const roArray: ReadonlyArray<string> = ["red", "green", "blue"];

// This is not correct, ReadonlyArray is intended to be used as a type, not as a value
const someValue = new ReadonlyArray();

If we don't want to use generics, we can use readonly Type[]

function doStuff(values: readonly string[]) {
  // We can read from 'values'...
  const copy = values.slice();
  console.log(`The first value is ${values[0]}`);

  // ...but we can't mutate 'values'.
  values.push("hello!");
Property 'push' does not exist on type 'readonly string[]'.
}

Tuple Types

You can create tuple types by specifying it like this:

type StringNumberPair = [string, number]
// It doesn't have to be only 2 values, can be more if needed.

function doSomething(pair: StringNumberPair) {
  const a = pair[0];
  const b = pair[1];
  const c = pair[2] // Error, cannot access index 2 on StringNumberPair
}

doSomething(["hello", 42]);

You can also destructure a tuple using destructuring in javascript.

type Point = [number, number]

function doSomething(point: Point){
  let [x,y] = point;
}

React Best Practices

Pedro Uzcátegui — Mon, 31 Oct 2022 16:50:38 +0000

1. Every prop provided to a component has a default value of true.

When we pass a prop (even without a value), the mere existence of that prop, is going to return true. So if we want to render if true, we can simply write the component like this:

export default function App() {
  return (
    <main>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      {title} // Will not show if false
    </div>
  )
}

2. Move Unrelated Code into Separate Components

Let's say we have this:

export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <main>
      <Navbar title="My Special App" />
      <ul> // We could refactor this>>>>>>>>>
        {posts.map(post => ( 
          <li key={post.id}>
            {post.title}
          </li>
        ))}
      </ul> // <<<<<<<<<We could refactor this
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

Is not clean because we can encapsulate that behavior in a separate component and make it easier to read.

The solution, is to create a new component called "FeaturedPosts" that is going to render out the posts.

export default function App() {
 return (
    <main>
      <Navbar title="My Special App" />
      <FeaturedPosts />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
}

function FeaturedPosts() {
  const posts = [
    {
      id: 1,
      title: "How to Build YouTube with React"
    },
    {
      id: 2,
      title: "How to Write Your First React Hook"
    }
  ];

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. Components should live in their own files. Also, if a certain component is only going to live for another component, then it shouldn't have its own file.

export function ButtonPrimary({text}){ // We export what we're going to use.
  return(
    <Button class="primary">
      {text}
    </Button>
  )
}

function Button({children}){ // And we don't export what we won't
  return(
    <button>
      {children}
    </button>
  )
}

4. Inline Styles for less bloated code

This means: Define an object called styles, and then use it into your inline styles. This will be cleaner than passing the entire object to the inline style.

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    <main style={styles.main}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

5. If you just need to conditionally render if true, use the Logical AND operator(&&)

This operator checks if the expression on the left is truthy. If the expression is any of those, it will execute/render the part on the right. If not, it will execute the left part.

Note 1: Don't mix with the nullish coalescing operator (??) which checks for undefined or null.

Note 2: Truthy is a set of values that are converted to booleans through type coercion.

The example:

import React, { useState } from 'react'

export const ConditionalRenderingWhenTrueBad = () => {
  const [showConditionalText, setShowConditionalText] = useState(false)

  const handleClick = () =>
    setShowConditionalText(showConditionalText => !showConditionalText)

  return (
    <div>
      <button onClick={handleClick}>Toggle the text</button>
      {showConditionalText && <p>The condition must be true!</p>}
    </div>
  )
}

6. Event handlers can be provided in a different way if only the event is passed.

We usually pass events as (e) => handleSomething(e). But since there is implicit binding here, we can do simply handleSomething() and it will contain the Event context.


import React, { useState } from 'react'

export const UnnecessaryAnonymousFunctionsGood = () => {
  const [inputValue, setInputValue] = useState('')

  const handleChange = e => {
    setInputValue(e.target.value)
  }

  return (
    <>
      <label htmlFor="name">Name: </label>
      <input id="name" value={inputValue} onChange={handleChange} />
    </>
  )
}

7. When setting the state that depends from the previous state, always access to the previous state and not the state directly.

We need to write it this way, or could lead to unexpected behavior.

import React, { useState } from 'react'

export const PreviousStateGood = () => {
  const [isDisabled, setIsDisabled] = useState(false)

  const toggleButton = () => setIsDisabled(isDisabled => !isDisabled)

  const toggleButton2Times = () => {
    for (let i = 0; i < 2; i++) {
      toggleButton()
    }
  }

  return (
    <div>
      <button disabled={isDisabled}>
        I'm {isDisabled ? 'disabled' : 'enabled'}
      </button>
      <button onClick={toggleButton}>Toggle button state</button>
      <button onClick={toggleButton2Times}>Toggle button state 2 times</button>
    </div>
  )
}

Special thanks to @thawkin3 and Freecodecamp Blogs.

React Hooks

Pedro Uzcátegui — Fri, 15 Oct 2021 02:44:07 +0000

React Hooks were introduced on React 16.8 by Dan Abramov, the creator of React.js

Hooks are a series of features that allows developers to use certain functionalities that were impossible in plain react function components.

We have a series of pre-defined hooks that react offers us, but we also can create our own hooks.

useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue

And we also will create 3 example custom hooks for our projects.

We will explain the hooks and then move into a project only using hooks.

Let's see the React.js hooks rules:

Call Hooks only on the superior level:
You can't call hooks in cycles, conditionals, or nested functions
Call Hooks only on React Functional Components or custom hooks

The list of pre-defined hooks we will explore will be:

useState
useEffect

The useEffect hooks is used on data request, subscriptions and manual actualizations. These ones are called "secondary effects"

If you're familiar with React Class Components, then, you will use the useEffect hook to handle the following lifecycle methods: componentDidMount, componentDidUpdate, componentWillUnmount.

Also, there are 2 types of secondary effects, those who requires sanitizing operation and other who don't.

Those who do not require sanitizing: Those hooks which we can execute and forget about them, for example: Network Requests, Manual DOM Mutations, Register
Those who require sanitizing: We sanitize effects that could lead to a memory leak

Effects run at every render, so we use the useEffect hook to reeplace some lifecycle methods (componentDidMount, componentDidUpdate, componentWillUnmount)

Returning a function inside the useEffect to indicate react how to sanitize a effect (clean, unmount)

We usually use the useEffect with state variables.

Omiting effects to optimize rendering: If you do not want to run the effect every time the component is updated, then you should consider using the second argument of the hook, the dependency array.

const [count, setCount] = useState(0)

useEffect(()=>{
   setCount(count + 1)
},[count])

This effect will run only and if only the count state variable value changes.

We can add more values to it

If we leave the dependency array empty, it will only run once

Learn Express.js by doing

Pedro Uzcátegui — Thu, 26 Aug 2021 02:18:35 +0000

Hello Devs, we're going to build a clothing store using Express.js!

You'll be learning:

Express
Middlewares
Template Engines
MVC
MongoDB
And a lot more!

Part 1 - Introduction

Part 2 - Creating a basic server express

First, we initiate our node project by using npm init

Tip: You can use the flag -y to save the bla bla from the beggining

[image of the npm init]

Then, we need to install a couple of dependencies, the first one being express of course:

npm install express --save

We use the --save flag to save this dependency in our project.

And also, because the devmode, install nodemon and set up a "dev" script in your package.json

npm i nodemon --dev

We use the --also=dev flag because we only want this dependency in development mode

[setting the script]

Now, in your index.js file, let's create a basic express server, do not worry, I'm going to explain everything from the code.

First, we import our express package and save it into a constant.

See: When to use constant, let and var.

const express = require("express");

Then, we instantiate the express object by calling the express function.

const app = express();

Now, we set the port and hostname, we're going to know more about the process object in deployment, even though, if you want to learn more about process, see: What is the process object in node.js.

const port = process.env.PORT || 3000;
const host = process.env.HOST || "127.0.0.1";

Now the actual express code, here we call the get method, first parameter is the path that we want to set up, and the second is a callback, also called the RequestListener in node.js, where we can play with the request and response objects.

For educational purposes, we're going to just send a basic response

app.get("/",(req, res)=>{
    res.send("Index Page");
});

Now, we created a server, but we need to put it to listen to requests, we do that with the .listen method, that have various functions overloads (you can read about functions overloads here), but we're going to pass the port, the host name, and a callback that fires up when the server is initiated.

app.listen(port,host,()=>{
    console.log("Server is running");
});

Now, if you do "npm run dev", you will see this on console:

[image of response]

And if you browse http://127.0.0.1:3000, you will see something like this:

[image]

Part 3 - Routes

Now, for our app, we defined the pages and structure in the introduction

[routes image]

First of all, is create the routes folder in the root folder of our project, At the same level of index.js file

/routes

Inside of the routes folder, we create every Route Handler for our express application, let's create a shop.js file, that will be our ShopRouteHandler.

First, we import express again and this time, instantiate the Router object using the Router.function from the express package.

const express = require("express");
const router = express.Router();

Now, with the router, we will be creating all of the shop routes, so you need to know beforehand, that our routes will have the "/shop" prefix

router.get("/",(req, res)=>{
    res.send("All the categories here")
})

This will be sent when the /shop route is requested

Now, we're going to create the other routes

router.get("/:category",(req, res)=>{
    let category_uri = req.params.category;
    res.send(category_uri);
});

This :category thing you see on the path, is actually a variable, we use the colon (not the literal human colon, but the double points) to identify parameters in our routes, so in this case, when the "/shop/shoes" endpoint is requested, the category_uri value will be shoes, and if the "/shop/jackets" endpoint is requested, the category_uri variable value will be 'jackets'

We do this because we need this data to search all the products related to this specific category in our Database

Now, following the same logic, let's create the same for subcategories and products, can you do it without seeing the code below? Take that challenge!

The answer:

router.get("/:category/:sub_category",(req,res)=>{
    let category_uri = req.params.category;
    let subcategory_uri = req.params.sub_category;
    res.send(`You are seeing the ${subcategory_uri} of the ${category_uri} category`); 
});

router.get("/:category/:sub_category/:item",(req,res)=>{
    let category_uri = req.params.category;
    let subcategory_uri = req.params.sub_category;
    let item = req.params.item;
    res.send(`You are seeing the ${item} item of the ${subcategory_uri} subcategory of the ${category_uri} category`); 
});

Now, we need to export our router in order to use it outside this file, in the same file, we write:

module.exports = router

You can read more about modules in javascript and node.js here, and you can read about import vs require here, and also, you can read module.exports vs export here.

Now, return to the index.js file, and require your shop.js file

const shopRouteHandler = require("./routes/shop");

And set up the route handler using the app.use function, this will need to be on the top before any method calls, it needs to be at top after the requires

app.use('/shop',shopRouteHandler);

Now, serve the app and you will visit the routes in order to confirm everything is done right.

Setting up view engines

For this course, we will use pug, but you can use EJS or Handlebars if you like! (and if you come from ruby on rails, these are something like erb in ruby!)

Now, we will install pug (Formerly known as jade), remember to save this dependency

Tip: Not knowing when to save a dependency? Learn here when to save a dependency in your project

npm i pug --save

Now, we need to config our app view engine, we can do that using the app.set() function, place this line of code before middlewares

app.set('view engine','pug');

Now, we need to set the folder where our static assets will be, by default, we will be using the 'public' folder, so create it into the root of the project

app.use(express.static('public'));

Also, create the views folder

[create the views folder]

Now, create an index.pug file inside the views folder and put this code on it

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Document
    body 
        h1 index folder 
        p This is some content

Don't you know nothing about pug? Do not worry, look at this article on Crash Course on Pug

Now, we send the view as response in the "/" endpoint

app.get("/",(req,res)=>{
    res.render('index')
});

The .render function searches the index.pug file inside the views folder of the project, we can also pass it arguments to use inside the pug file.

DEV Community: Pedro Uzcátegui

Full Redux Overview pt.1 - Actions, Reducers, Slices, Store, Dispatch, Selectors, with React and Typescript

Why Redux?

Observer Pattern and the relationship with Redux

Reducers

Reducers and Dispatchers in Redux

Rules of Reducers

Redux Terminology in Depth

Actions

Reducers

Middlewares

Pure Functions

Immutability

Simple Counter Application With React and Typescript

0. Create a vite project using npm create vite

1. Install the react-redux dependency

2. Install "@reduxjs/toolkit" dependency

3. Create a Provider an pass the store to it

Lines 1 - 2

Lines 5 - 11

Lines 14 - 28

4. Defined Typed Hooks

5. Pass that slice to the root state inside store.ts

6. Then use useAppSelector and useAppDispatch to get and update state accordingly.

Differences between redux, reduxjs/toolkit and react-redux.

Reduxjs

Redux Toolkit or RTK

react-redux

React.js Controlled vs Uncontrolled

Controlled Components

Uncontrolled Components

React Refs

Typescript Classes Pt.1

Initializing a class

Definite Assignment Assertion Operator

Readonly Properties

Constructor Overloads

Extending a class

The super() method of a class.

Extends vs Implements in OOP

Implements

Extends

Methods in Typescript Classes

Getters and Setters in Typescript

Overriding methods in extended classes

Typescript Interfaces and Generics.

Objects in Typescript

Typescript Interfaces

Extending from multiple interfaces.

Intersection Types

Generics in typescript

Nested Generics

Array Generic

Tuple Types

React Best Practices

1. Every prop provided to a component has a default value of true.

2. Move Unrelated Code into Separate Components

3. Components should live in their own files. Also, if a certain component is only going to live for another component, then it shouldn't have its own file.

4. Inline Styles for less bloated code

5. If you just need to conditionally render if true, use the Logical AND operator(&&)

6. Event handlers can be provided in a different way if only the event is passed.

7. When setting the state that depends from the previous state, always access to the previous state and not the state directly.

React Hooks

Learn Express.js by doing

0. Create a vite project using `npm create vite`